uniapp如何实现路由拦截？

今天再次介绍一下 uni-simple-router 插件，记得最初使用时，是在三年以前了，这里简单介绍通过自动读取 pages.json 作为路由表的方式，欢迎指教~

参考文档： uni-simple-router

安装

• 这里使用 NPM 安装

# 安装npm install uni-simple-routernpm install uni-read-pages# 或者： yarn add uni-simple-router

配置 vue.config.js

• 配置 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 )})]}
}

创建 router

• 创建路由，例在项目根目录下创建 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
}

在 main.js 引入 router.js

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

---

至此，基本配置就完成了，请 重新编译 项目~

• 下一站：实战.登录路由拦截案例