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

  • Post author:
  • Post category:其他


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