uni-app怎么使用路由守卫，并且路由配置和pages.json中只写一套
<h3 id="背景">背景</h3><p>uni-app本身没有路由，无法使用路由守卫。<br>
那么有这么一个功能： 当某些页面需要登录，进入之前需要判断是否登录，如果没有登录则跳转到登录页。<br>
可以封装公共方法或混入实现，但是不太优雅，这时使用路由守卫实在是太方便了！<br>
幸好，插件uni-simple-router给我们提供了</p>
<h3 id="1-uni-simple-router使用方法">1. uni-simple-router使用方法</h3>
<p>uni-simple-router 是 专为 uni-app 打造的路由管理器。它保留了 Vue-router 完全相似的书写风格，让你 倍感亲切。 让构建单页面应用变得易如反掌。<br>
具体使用详见uni-simple-router文档</p>
<h3 id="2-从pagesjs获取配置的pages来配置路由">2. 从pages.js获取配置的pages来配置路由</h3>
<p>引入uni-simple-router后，我们要配置路由，那么问题来了，我们之前在pages.json中配置过页面，这里又要配置路由，相当于一个页面进行了两次配置，太麻烦！</p>
<p>使用一套配置方法如下：</p>
<h5 id="a-将pagesjson中的配置移入pagesjs中">a. 将pages.json中的配置移入pages.js中</h5>
<p>uni-app自带一个webpack loader钩子文件pages.js，在项目src目录下建立pages.js（与pages.json同级）即可生效（pages.json仍然需要存在，内容为{}即可）。<br>
pages.js要求CommonJS规范，直接通过module.exports输出一个钩子函数。</p>
<pre><code class="language-js">module.exports = () => ({
"pages": [
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "我的",
"navigationStyle": "custom"
}
},
{
"path": "pages/index/search,
"style": {
"navigationBarTitleText": "查询"
},
meta: {
needLogin: true
}
},
···
],
"globalStyle": {
···
}
})
</code></pre>
<h5 id="b-routerjs中导入pagesjs基于pages进行封装路由">b. router.js中导入pages.js，基于pages进行封装路由</h5>
<pre><code class="language-js">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;
</code></pre>
<p>这样，页面只需要在pages.js中进行配置，路由会从该文件中获取。</p><br><br>
来源：https://www.cnblogs.com/XHappyness/p/13808413.html
頁:
[1]