6.uniapp 实现全局拦截路由

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

  vue2支持，vue3不行：

需要安装uni-read-pages和uni-simple-router,通过两个插件实现如同vue的router的效果,这样就可以进行路由拦截

package.json

{ "name": "uniapp", "version": "1.0.0", "description": "", "main": "main.js", "scripts": {}, "dependencies": { "uni-read-pages": "^1.0.5", "uni-simple-router": "^2.0.2" } }

 pages.json：

{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" } }

 vue.config.js

其中includes可以设置自定义的一些参数,具体文案请看下文链接

``` const TransformPages = require('uni-read-pages') const { webpack } = new TransformPages() let pluginsDev = new webpack.DefinePlugin({ ROUTES: webpack.DefinePlugin.runtimeValue(() => { const tfPages = new TransformPages({ includes: ['path', 'name', 'aliasPath'] }); return JSON.stringify(tfPages.routes) }, true) }) console.log(ROUTES,'---ROUTES---') module.exports = { configureWebpack: {

},
chainWebpack: (config) => {
    config.plugins.push(pluginsDev)
    // 发行或运行时启用了压缩时会生效  
    config.optimization.minimizer('terser').tap((args) => {
        const compress = args[0].terserOptions.compress
        // 非 App 平台移除 console 代码(包含所有 console 方法，如 log,debug,info...)  
        compress.drop_console = true
        compress.pure_funcs = [
            '__f__', // App 平台 vue 移除日志代码  
            // 'console.debug' // 可移除指定的 console 方法  
        ]
        return args
    })
}

} ```

根目录创建： router->index.js：

``` // router.js import { RouterMount, createRouter } from 'uni-simple-router'; // 创建路由表 const router = createRouter({ // vue-cli创建项目的相关环境变量文件里面的变量，可能是区分平台使用，不是太重要。 platform: process.env.VUEAPPPLATFORM, // 路由信息 routes: [...ROUTES] }); //全局路由前置守卫 router.beforeEach((to, from, next) => { console.log(to, from,'--to, from, next---') next() // next({ // path: '', // NAVTYPE: 'push' // }); }); // 全局路由后置守卫 router.afterEach((to, from) => { console.log('跳转结束') })

export { router, RouterMount } ```

 mian.js:

``` import App from './App' // 路由 import { router, RouterMount } from './router/index.js';

import Vue from 'vue' // 路由 Vue.use(router) Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App }) // #ifdef H5 RouterMount(app, '#app'); // #endif app.$mount() ```

uni-read-pages(uniapp插件)

 uni-read-pages

runtime-values-via-runtimevalue