背景
uni-app本身没有路由，无法使用路由守卫。
那么有这么一个功能： 当某些页面需要登录，进入之前需要判断是否登录，如果没有登录则跳转到登录页。
可以封装公共方法或混入实现，但是不太优雅，这时使用路由守卫实在是太方便了！
幸好，插件uni-simple-router给我们提供了
1. uni-simple-router使用方法
uni-simple-router 是 专为 uni-app 打造的路由管理器。它保留了 Vue-router 完全相似的书写风格，让你 倍感亲切。 让构建单页面应用变得易如反掌。
具体使用详见uni-simple-router文档
2. 从pages.js获取配置的pages来配置路由
引入uni-simple-router后，我们要配置路由，那么问题来了，我们之前在pages.json中配置过页面，这里又要配置路由，相当于一个页面进行了两次配置，太麻烦！
使用一套配置方法如下：
a. 将pages.json中的配置移入pages.js中
uni-app自带一个webpack loader钩子文件pages.js，在项目src目录下建立pages.js（与pages.json同级）即可生效（pages.json仍然需要存在，内容为{}即可）。
pages.js要求CommonJS规范，直接通过module.exports输出一个钩子函数。
module.exports = () => ({
"pages": [
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "我的",
"navigationStyle": "custom"
}
},
{
"path": "pages/index/search,
"style": {
"navigationBarTitleText": "查询"
},
meta: {
needLogin: true
}
},
···
],
"globalStyle": {
···
}
})
b. router.js中导入pages.js，基于pages进行封装路由
import Vue from ‘vue‘
import store from ‘./store‘
import Router, {
RouterMount
} from ‘./js_sdk/hhyang-uni-simple-router/index.js‘
import pages from ‘./pages.js‘
Vue.use(Router)
const myRouter =
pages().pages.map(item => ({
path: `/${item.path}`,
meta: item.meta || {}
}))
//初始化
const router = new Router({
routes: myRouter
});
//全局路由前置守卫
router.beforeEach((to, from, next) => {
const isLogin = store.getters.isLogin
if (!isLogin && to.meta.needLogin) {
next({
path: ‘/pages/login/index‘,
query: {
redirect: to.path
}
})
} else {
next()
}
})
// 全局路由后置守卫
router.afterEach((to, from) => {})
export default router;
这样，页面只需要在pages.js中进行配置，路由会从该文件中获取。