快速上手

注意 详细

一、安装

https://ext.dcloud.net.cn/plugin?id=578 uni-simple-router提供了基于 NPM 的链接。通过 NPM 安装能确保与最新版同步，同样你还可以指定版本或 Tag 。当然你还可以在 uni-app的插件市场 进行下载，或者直接导入项目中。

方式一：NPM安装（推荐）

1、项目根目录命令行执行

  1. npm install uni-simple-router

2、项目中引入

  1. import Vue from 'vue'import Router, {RouterMount} from 'uni-simple-router';Vue.use(Router)//...后续代码

方式二：插件市场（使用HBuilderX导入插件）

插件市场 点击 使用HBuilderX导入插件 完成后会自动在根目录生成js_sdk目录，我们会看到里面有一个hhyang-uni-simple-router文件夹。 2、项目中引入

  1. import Vue from 'vue'import Router, {RouterMount} from './js_sdk/hhyang-uni-simple-router/index.js';Vue.use(Router)//...后续代码

方式三：插件市场（下载插件ZIP）

插件市场 点击 下载插件ZIP 完成后解压到本地。把 解压的src 目录下所有文件拖放到自己创建的项目文件夹中(比如/common/uni-simple-router)。 2、项目中引入

  1. import Vue from 'vue'import Router, {RouterMount} from './common/uni-simple-router/index.js';Vue.use(Router)//...后续代码

注意 v1.4.8 起，不管是npm安装的还是插件市场安装的都需要执行 npm install，下载路由插件所需要的依赖。记住是在你自己项目的根目录执行！

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

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

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

二、初始化

说明 如果你需要自动读取

第1步、项目根目录创建router文件夹

文件夹内创建如下结构用于放置路由相关文件：

  1. router    |--modules    |   |--index.js    |--index.js

我们可以看到router有个moduls文件夹，这是专门放置路由表模块的。moduls内的index.js如下编写

  1. // router/modules/index.jsconst 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

我们不难发现，这个index.js将引入同目录下其他js文件并读取，使所有路由整合为一个数组并export导出。接下来你可以根据不同的页面分类，创建不同的js模块，我们试着在modules下创建一个home.js用于存放首页及其相关的路由

  1. // router/modules/home.jsconst 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步、引入uni-simple-router模块

我们打开router下的index.js,配置如下

  1. // router/index.jsimport 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;

我们看到刚才的modules已经加入到了路由表routes中。 注意 在跨平台模式下，routes中的路由必须与pages.json中的页面一一对应，也就是说pages.json中有几个页面，routes就得有对应的路由，否则跳转的时候可能会报错

第3步、配置main.js

根目录下找到main.js，引入router

  1. // main.jsimport 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

在其它js文件中使用router

至此，你可以在所有页面中使用this.$Router跳转，或者用this.$Route接收参数了。但是在一些模块的js中（比如封装的网络请求拦截）使用时，可能会出现this指代不明的情况。这时，刚才我们创建的router文件模块的好处就显现出来了。比如在根目录下的requset.js中使用router

  1. // request.jsimport Vue from 'vue'import Router from '@/router'//...其它逻辑代码Router.push({ name:'login' })

跨平台模式 或者H5模式 的详细介绍。