快速上手

    vue-cli 项目请手动配置 vue.config.js 下 transpileDependencies:['uni-simple-router']

    插件市场地址：https://ext.dcloud.net.cn/plugin?id=578快速上手 - 图1

    提供了基于 NPM 的链接。通过 NPM 安装能确保与最新版同步，同样你还可以指定版本或 Tag 。当然你还可以在 uni-app的插件市场快速上手 - 图2 进行下载，或者直接导入项目中。

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

    2、项目中引入

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

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

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

    2、项目中引入

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

    2、项目中引入

    注意

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

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

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

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

    二、初始化

    说明

    以下教程为项目页面较多时的推荐router初始化方案，目的是模块化，让代码解耦，使条理加更清晰。如果页面较少，可适当精简流程。如果你需要自动读取 pages.json 作为路由表，那请参照自动构建路由表

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

    2. router
    3.     |--modules
    4.     |--index.js

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

    1. // router/modules/home.js
    2. const home = [
    3.     {
    4.         //注意：path必须跟pages.json中的地址对应，最前面别忘了加'/'哦
    5.       path: '/pages/home/index',
    6.       aliasPath:'/',  //对于h5端你必须在首页加上aliasPath并设置为/
    7.       name: 'index',
    8.         meta: {
    9.             title: '首页',
    10.         },
    11.     },
    12.     {
    13.         path: '/pages/home/list',
    14.         name: 'list',
    15.         meta: {
    16.             title: '列表',
    17.         },
    18.     },
    19. ]
    20. export default home

    这时该模块将被自动加载到modules中，你可以根据不同的路由分类，添加更多模块。index.js会自动载入,就是这么方便! 对于糟色部分，那是必须的。否则你将会出现首页加载不出，路由匹配为空的情况。

    第2步、引入uni-simple-router模块

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

    1. // router/index.js
    2. import modules from './modules'
    4. //这里仅示范npm安装方式的引入，其它方式引入请看最上面【安装】部分
    5. import Router from 'uni-simple-router'
    7. Vue.use(Router)
    8. //初始化
    9. const router = new Router({
    10.     routes: [...modules]//路由表
    11. });
    13. //全局路由前置守卫
    14. router.beforeEach((to, from, next) => {
    15.   next()
    16. })
    17. // 全局路由后置守卫
    18. router.afterEach((to, from) => {
    19. })
    20. export default router;

    我们看到刚才的modules已经加入到了路由表routes中。

    注意

    在跨平台模式下，routes中的路由必须与pages.json中的页面一一对应，也就是说pages.json中有几个页面，routes就得有对应的路由，否则跳转的时候可能会报错

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

    在其它js文件中使用router

    1. // request.js
    2. import Vue from 'vue'
    3. import Router from '@/router'
    5. //...其它逻辑代码

    快速上手到此完成，如果需要更深入理解其中的功能模块，请根据自身项目的性质，阅读 或者H5模式 的详细介绍。