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