uniapp路由守卫

在uniapp 官网全局搜索路由守卫时发现，并没有路由守卫相关的信息。如果官网没有相关信息，也就基本说明了uniapp没有路由守卫。搜索结果如下：

但是uniapp建立了一个非常棒的生态，那就是插件市场。在插件市场中，有很多大牛提供了各种丰富的插件，其中就包含有路由守卫的插件uni-simple-router 。

接下来我们的uniapp路由守卫将使用uni-simple-router这个插件来实现。

开始

1. HBuilderX创建一个uniapp 项目

项目目录结构如下：

2. 使用终端工具 cmd 进入项目根目录，安装uni-simple-router

npm install uni-simple-router

//自动构建路由表
npm install uni-read-pages

3. 在项目根目录创建一个vue.config.js文件，并加入以下代码：

//vue.config.js
const TransformPages = require('uni-read-pages')
const {webpack} = new TransformPages()
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.DefinePlugin({
                ROUTES: webpack.DefinePlugin.runtimeValue(() => {
                    const tfPages = new TransformPages({
                        includes: ['path', 'name', 'aliasPath']
                    });
                    return JSON.stringify(tfPages.routes)
                }, true )
            })
        ]
    }
}

4. 在根目录创建一个路由文件router.js，并写入如下代码：

// router.js
import {RouterMount,createRouter} from 'uni-simple-router';

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

export {
    router,
    RouterMount
}

5. 在main.js 中引入router.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

如果main.js 中有VUE3条件，去除有关VUE3的代码和条件分支。因为uni-simple-router插件不支持vue3

6. 在router.js 前置守卫打印to路由，查看是否安装成功。

router.beforeEach((to, from, next) => {
    console.log(to)
    next();
});

运行结果，在控制台打印出了全局导航守卫to的内容，成功！