背景

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中進行配置，路由會從該檔案中獲取。