# 快速上手

# 一、安装

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

uni-simple-router提供了基于 NPM 的链接。通过 NPM 安装能确保与最新版同步，同样你还可以指定版本或 Tag 。当然你还可以在 uni-app的插件市场进行下载，或者直接导入项目中。插件市场的引入方式请自行捣鼓，不推荐！ 以下是NPM 包管理安装方式。

# NPM安装

项目根目录命令行执行

npm install uni-simple-router

# 体验开发版（正式项目慎用）

如果你想体验最新的开发版，就得从 GitHub 上直接 clone dev分支，然后自己拖入到项目中引入index.js。

git clone https://github.com/SilurianYang/uni-simple-router.git
cd uni-simple-router/src

1
2

# 二、初始化

说明

以下是通过自动读取 pages.json 作为路由表的方式，了解更多请参照 自动构建路由表

# 安装

npm install uni-read-pages

接着我们配置 vue.config.js，如果你的项目根目录下没有 vue.config.js 那请你手动新增下。

# 1、配置 `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 )
			})
		]
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 2、新建并写入 `router.js`

注意

不同方式初始化的项目会有所不同。cli 源码在 src 下，ide 源码在根目录。

// 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
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 3、在 `main.js` 引入 `router.js`

// main.js

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

App.mpType = 'app'
const app = new Vue({
    ...App
})

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

重新编译警告

请用你的小手轻轻的按下重新编译！静静的等待。。。至此，快速上手已完成。

← 介绍 TypeScript 中使用 →