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