# 快速上手
注意
vue-cli 项目请手动配置 vue.config.js 下 transpileDependencies:['uni-simple-router'] 详细
# 一、安装
插件市场地址：https://ext.dcloud.net.cn/plugin?id=578
uni-simple-router提供了基于 NPM 的链接。通过 NPM 安装能确保与最新版同步，同样你还可以指定版本或 Tag 。当然你还可以在 uni-app的插件市场 进行下载，或者直接导入项目中。
# 方式一：NPM安装（推荐）
1、项目根目录命令行执行
npm install uni-simple-router@1.5.5
2、项目中引入
import Vue from 'vue'
import Router, {RouterMount} from 'uni-simple-router';
Vue.use(Router)
//...后续代码
2
3
4
# 体验开发版（正式项目慎用）
如果你想体验最新的开发版，就得从 GitHub 上直接 clone dev分支，然后自己 拖入到项目中引入index.js。
git clone https://github.com/SilurianYang/uni-simple-router.git
cd uni-simple-router/src
2
# 二、初始化
说明
以下教程为项目页面较多时的推荐router初始化方案，目的是模块化，让代码解耦，使条理加更清晰。如果页面较少，可适当精简流程。如果你需要自动读取 pages.json 作为路由表，那请参照自动构建路由表
注意
如果您使用了自动构建路由表，可以直接跳过下面的 第一步,第二步。直接跳到第三步即可！
# 第1步、项目根目录创建router文件夹
文件夹内创建如下结构用于放置路由相关文件：
router
|--modules
| |--index.js
|--index.js
2
3
4
5
6
我们可以看到router有个moduls文件夹，这是专门放置路由表模块的。 moduls内的index.js如下编写
// router/modules/index.js
const files = require.context('.', false, /\.js$/)
const modules = []
files.keys().forEach(key => {
if (key === './index.js') return
const item = files(key).default
modules.push(...item)
})
export default modules
2
3
4
5
6
7
8
9
10
11
12
我们不难发现，这个index.js将引入同目录下其他js文件并读取，使所有路由整合为一个数组并export导出。 接下来你可以根据不同的页面分类，创建不同的js模块，我们试着在modules下创建一个home.js用于存放首页及其相关的路由
// router/modules/home.js
const home = [
{
//注意：path必须跟pages.json中的地址对应，最前面别忘了加'/'哦
path: '/pages/home/index',
aliasPath:'/', //对于h5端你必须在首页加上aliasPath并设置为/
name: 'index',
meta: {
title: '首页',
},
},
{
path: '/pages/home/list',
name: 'list',
meta: {
title: '列表',
},
},
]
export default home
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
这时该模块将被自动加载到modules中，你可以根据不同的路由分类，添加更多模块。index.js会自动载入,就是这么方便! 对于糟色部分，那是必须的。否则你将会出现首页加载不出，路由匹配为空的情况。
# 第2步、引入uni-simple-router模块
我们打开router下的index.js,配置如下
// router/index.js
import modules from './modules'
import Vue from 'vue'
//这里仅示范npm安装方式的引入，其它方式引入请看最上面【安装】部分
import Router from 'uni-simple-router'
Vue.use(Router)
//初始化
const router = new Router({
routes: [...modules]//路由表
});
//全局路由前置守卫
router.beforeEach((to, from, next) => {
next()
})
// 全局路由后置守卫
router.afterEach((to, from) => {
})
export default router;
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
我们看到刚才的modules已经加入到了路由表routes中。
注意
在跨平台模式下，routes中的路由必须与pages.json中的页面一一对应，也就是说pages.json中有几个页面，routes就得有对应的路由，否则跳转的时候可能会报错
# 第3步、配置main.js
根目录下找到main.js，引入router
// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import { RouterMount } from 'uni-simple-router'
App.mpType = 'app'
const app = new Vue({
...App
})
//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式
// #ifdef H5
RouterMount(app,'#app');
// #endif
// #ifndef H5
app.$mount(); //为了兼容小程序及app端必须这样写才有效果
// #endif
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 在其它js文件中使用router
至此，你可以在所有页面中使用this.$Router跳转，或者用this.$Route接收参数了。但是在一些模块的js中（比如封装的网络请求拦截）使用时，可能会出现this指代不明的情况。这时，刚才我们创建的router文件模块的好处就显现出来了。 比如在根目录下的requset.js中使用router
// request.js
import Vue from 'vue'
import Router from '@/router'
//...其它逻辑代码
Router.push({ name:'login' })
2
3
4
5
6
7