uni-app 使用uni-simple-router进行路由守卫
<pre><code class="language-javascript">// 1. 安装依赖// uni-read-pages 适用于读取page.json 文件中的路由信息
npm i uni-simple-router@2.0.7 uni-read-pages
</code></pre>
<pre><code class="language-javascript">// 2. 配置与初始化
// 2.1 根目录新建 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', 'meta']
});
return JSON.stringify(tfPages.routes)
}, true)
})
]
}
}
</code></pre>
<pre><code class="language-javascript">// 新建 router 配置文件
import { RouterMount, createRouter } from 'uni-simple-router';
import store from "@/store/index.js"
const router = createRouter({
platform: process.env.VUE_APP_PLATFORM,
routerErrorEach: ({ type, msg }) => {
console.log(type, msg);
switch (type) {
// APP退出应用
case 3:
// #ifdef APP-PLUS
router.$lockStatus = false;
uni.showModal({
title: '提示',
content: '您确定要退出应用吗？',
success: function (res) {
if (res.confirm) {
plus.runtime.quit();
}
}
});
// #endif
break;
case 2:
case 0:
router.$lockStatus = false;
break;
default:
break;
}
},
routes: [...ROUTES] // ROUTES 这个名称是webpack 中配置的名称
});
//全局路由前置守卫
router.beforeEach((to, from, next) => {
if (to.meta && to.meta.currentNav) {
store.commit('updateCurrentNav', to.meta.currentNav);
}
next()
});
export { router, RouterMount }
</code></pre>
<pre><code class="language-javascript">// 3 main.js导入router.js并挂载
import {router,RouterMount} from './router/index';
// #ifdef H5
RouterMount(app,router,'#app')
// #endif
// #ifndef H5
app.$mount(); //为了兼容小程序及app端必须这样写才有效果
// #endif
</code></pre><br><br>
来源：https://www.cnblogs.com/rzl795/p/17040538.html
頁:
[1]