uniapp如何实现路由拦截?
今天再次介绍一下
uni-simple-router
插件,记得最初使用时,是在三年以前了,这里简单介绍通过自动读取 pages.json 作为路由表的方式
,欢迎指教~
参考文档: uni-simple-router
安装
- 这里使用
NPM
安装
# 安装
npm install uni-simple-router
npm 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 H5
RouterMount(app, router, '#app')
// #endif
// #ifndef H5
app.$mount(); //为了兼容小程序及app端必须这样写才有效果
// #endif
至此,基本配置就完成了,请 重新编译
项目~
- 下一站:实战.登录路由拦截案例