zoukankan      html  css  js  c++  java
  • uniapp路由插件使用爬坑

    插件官网地址:https://hhyang.cn/v2/start/quickstart.html

    一.安装路由插件:

    npm install uni-simple-router

    二.配置路由:

    1.编写路由代码:

    // src/router/index.js
    import {RouterMount,createRouter} from 'uni-simple-router';
    
    const router = createRouter({
        platform: process.env.VUE_APP_PLATFORM,  
        routes: [...ROUTES]
    });
    //全局路由前置守卫
    router.beforeEach((to, from, next) => {
        next();
    });
    // 全局路由后置守卫
    router.afterEach((to, from) => {
        console.log('跳转结束')
    })
    
    export {
        router,
        RouterMount
    }

    2.配置main.js

    // main.js
    
    import Vue from 'vue'
    import App from './App'
    import {router,RouterMount} from './router.js'  //路径换成自己的
    Vue.use(router)
    
    App.mpType = 'app'
    const app = new Vue({
        ...App
    })
    
    //v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式
    // #ifdef H5
        RouterMount(app,router,'#app')
    // #endif
    
    // #ifndef H5
        app.$mount(); //为了兼容小程序及app端必须这样写才有效果
    // #endif

    三.使用路由:

     假如你是通过name 来进行跳转。
    this.$Router.push({ name: 'router1', params: { userId: '123' }})
    // 同样 等同于
    this.$Router.push({ path: '/pages/router1/router1', query: { userId: '123' }})

    四.路由守卫

    可以在路由前卫中拦截路由,验证是否登录

    //全局路由前置守卫
    router.beforeEach((to, from, next) => {
        next();
    });
    // 全局路由后置守卫
    router.afterEach((to, from) => {
        console.log('跳转结束')
    })

    五.坑位:

    1.install not 。。。。

    2.错误一:

    Uncaught ReferenceError: ROUTES is not defined

    3.错误三:

    chunk-vendors.js:2071 Uncaught TypeError: Cannot read property 'replace' of null

    为了明天能幸福,今天付出再多也不后悔。
  • 相关阅读:
    2019-8-31-win10-uwp-使用-WinDbg-调试
    PHP simplexml_import_dom() 函数
    PHP asXML() 函数
    PHP registerXPathNamespace() 函数
    PHP getNamespaces() 函数
    PHP getName() 函数
    查看收集统计信息的时间间隔
    SPOJ DISQUERY LCA + 倍增
    洛谷P3958 奶酪 并查集
    洛谷P2678 跳石头
  • 原文地址:https://www.cnblogs.com/zlp520/p/15292175.html
Copyright © 2011-2022 走看看