uni-simple-router插件的安装、配置以及基本使用

1.使用背景

uni-app本身没有路由管理，需要借助其他的组件插件，以下是以一个普通案例为背景进行说明的，该案例借助了uni-simple-router插件

插件官网：https://www.hhyang.cn/v2/

插件市场地址：https://ext.dcloud.net.cn/plugin?id=578

版本号：2.0

插件说明：

1. 专为uniapp打造的路由器，和uniapp深度集成
2. 通配小程序、App和H5端
3. H5能完全使用vue-router开发
4. 模块化、查询、通配符、路由参数
5. 使 uni-app实现嵌套路由（仅H5端完全使用vue-router）
6. uniapp用到了很多vue的api，但在路由管理的功能相对于vue-router还是比较欠缺的，比如全局导航守卫

插件目前存在的bug：

1. 组件式导航解析字符串错误Bug #227
2. APP 端使用 vue 页面过渡到 nvue tabbar 页面时，启动页空白的Bug #334
3. H5 端，使用 aliasPath 页面作为启动页访问时，返回或再次进入页面会重新触发生命周期Bug (#316)

2.插件的安装配置

2.1 安装说明

安装方式：

• npm包管理安装：uni-simple-router提供了基于 npm的链接，通过 npm安装能确保与最新版同步，同样你还可以指定版本或 Tag

• 插件市场安装：在 uni-app的插件市场进行下载，或者直接导入项目中

安装步骤：

以下是npm包管理安装说明，为了保证能够一次性成功安装到项目中，采用的中国淘宝镜像源安装

• 打开cmd命令行，进入目标项目根目录

• 安装uni-simple-router插件：

cnpm install uni-simple-router

• 初始化需要用到uni-read-pages获取pages.json构建路由表，所以还需安装：

 cnpm install uni-read-pages

2.2 配置说明

• 都安装成功后，接着配置 vue.config.js，如果项目根目录下没有 vue.config.js 请手动新增

//vue.config.js
const TransformPages = require('uni-read-pages')
const {webpack} = new TransformPages()
module.exports = {
	configureWebpack: {
		plugins: [
			new webpack.DefinePlugin({
				ROUTES: webpack.DefinePlugin.runtimeValue(() => {
					const tfPages = new TransformPages({
						includes: ['path', 'name', 'aliasPath']
					});
					return JSON.stringify(tfPages.routes)
				}, true )
			})
		]
	}
}

• 新建并写入 router.js，本项目把router.js放在了一个新增的文件夹router下,写入以下代码：

// router.js
import {RouterMount,createRouter} from 'uni-simple-router';

const router = createRouter({
	platform: process.env.VUE_APP_PLATFORM,  
	routes: [...ROUTES]
});
//全局路由前置守卫
router.beforeEach((to, from, next) => {
	next();
});
// 全局路由后置守卫
router.afterEach((to, from) => {
    console.log('跳转结束')
})

export {
	router,
	RouterMount
}

• 在 main.js 引入 router.js

// main.js

import {router,RouterMount} from './router/router.js'  //路径换成自己的
Vue.use(router)

//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式
// #ifdef H5
	RouterMount(app,router,'#app')
// #endif

// #ifndef H5
	app.$mount(); //为了兼容小程序及app端必须这样写才有效果
// #endif

注意：安装配置完成后，请重新编译查看，运行项目跳转路由，可查看控制台是否输出 ”跳转结束“，有则代表安装成功

3. 使用说明

该插件的使用方法和vue-router使用方法相似

vue-router官网：https://router.vuejs.org/zh/guide/

配置路由表：在这个插件中，所有页面的路由都已经被注册好了，在router.js中createRouter()函数下可以创建独享导航守卫，也可重新配置路由

注意：单独配置的路由必须写在 …ROUTES前面，为了兼容H5配置 项目启动页 时必须加上 aliasPath:‘/’

const router = createRouter({
	platform: process.env.VUE_APP_PLATFORM,
	routes: [{
			path: "/pages/order/order",
			name: 'order'
		},
		{
			path: "/pages/orther/orther",
			name: 'orther'
		}, {
			path: "/pages/my/my",
			name: 'my'
		}, {
			path: "/pages/index/index",
			aliasPath:'/',
			name: 'index'
		}, {
			path: "/pages/login/login",
			name: 'login'
		},
		{
			path: "/pages/orderDetail/orderDetail",
			name: 'orderDetail',
			beforeEnter: (to, from, next) => {
				if (from.name == 'order') next()
				else {
					uni.redirectTo({
						url: '/pages/order/order'
					})
				}
			}
		},
		{
			path: "/pages/orderQuary/orderQuary",
			name: 'orderQuary',
			quary: {
				id: 0
			},
			beforeEnter: (to, from, next) => {
				if (to.query.id > 0) next(console.log(to.query.id))
				else {
					uni.redirectTo({
						url: '/pages/order/order'
					})
				}
			}
		},
		...ROUTES
	]
});

设置全局路由守卫：

在router.js中找到router.beforeEach()这个函数，这是全局路由前置守卫，路由跳转前会执行这个钩子函数，它的三个参数：

1. to:将要跳转的目标路由
2. from:从哪里来，来源路由
3. next：next是个拦截函数
   （1） next()无参数时表示正常放行
   （2） next(false)表示阻止通行，此时不能跳转
   （3） next(‘/’)里面参数也可以是新路径，此时就会跳转到新路径

如果项目中有多个页面不需要权限就能访问，可以为他们创建一个白名单列表，路由跳转时对他们进行过滤

router.beforeEach((to,from,next)=>{
        let Authorization = uni.getStorageSync('Authorization')
	let whitePath = ['index', 'my', 'orther', 'login']//模拟了项目中不需要登录验证就能进入的页面
	let isWhite = whitePath.includes(to.name)//查找即将跳转路由是否在白名单中
	if (!Authorization && !isWhite) {//如果用户未登录并且也不是前往白名单页面，此时就让拦截用户前往登录页面
		next({
			name: 'login'
		})
	} else {
		next();
	}
)

设置独享路由守卫：

beforEnter函数同样也有to,from,next三个参数，也是在路由跳转前执行，所以在beforEnter函数中对单独页面进行判断拦截

                {
			path: "/pages/orderDetail/orderDetail",
			name: 'orderDetail',
			beforeEnter: (to, from, next) => {
                        //判断来源路由是否是order页，如果不是，就重定向到order页
				if (from.name == 'order') next()
				else {
					uni.redirectTo({
						url: '/pages/order/order'
					})
				}
			}
		},

也可判断跳转的路由是否携带参数：

{
			path: "/pages/orderQuary/orderQuary",
			name: 'orderQuary',
			quary: {
				id: 0
			},
			beforeEnter: (to, from, next) => {
				if (to.query.id > 0) next(console.log(to.query.id))
				else {
					uni.redirectTo({
						url: '/pages/order/order'
					})
				}
			}
		},

4. 结语

以上就是我个人总结的这个插件的安装、配置、以及基本使用说明，该插件功能是非常强大的，这只实现了简单的一个路由拦截，如有其他需求可前往插件官网仔细研究。

前端小白一枚，如有错误的地方，劳烦各位前辈多多指教~