博客

uni-app怎么使用路由守卫，并且路由配置和pages.json中只写一套

背景

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中进行配置，路由会从该文件中获取。