uni-simple-router

🚀 优质资源分享 🚀

学习路线指引（点击解锁）知识定位人群定位

进阶级本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。

入门级手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

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

// 针对uniapp HBuilder创建的项目，非cli构建
// 1⃣ NPM 安装
npm install uni-simple-router

// 2⃣ 初始化
npm install uni-read-pages // 配合vue.config.js自动读取pages.json作为路由表的方式，源码例如下：扩二

// 配置vue.config.js
const TransformPages = require('uni-read-pages')
const tfPages = new TransformPages()
module.exports = {
    configureWebpack: {
        plugins: [
              new tfPages.webpack.DefinePlugin({
                      // 1⃣ 配置全局变量
                      // ROUTES: JSON.stringify(tfPages.routes)
                      // 2⃣ includes 可自定义，解析pages.json路由配字段的配置， 默认 ['path', 'name', 'aliasPath']
                        ROUTES: tfPages.webpack.DefinePlugin.runtimeValue(()=>{
                          const tf = new TransformPages({
                            includes:  ['path', 'name', 'aliasPath']
                          })
                          return JSON.stringify(tfPages.routes)
                        },true)
                  })
        ]
    }
}

// /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node\_modules/webpack 我的webpack包路径，在软件contents包文件里软件自带的webpack

• 允许创建一个 在编译时可以配置的全局变量
• 场景：区分不同开发模式处理

// 1⃣ 用法：每个传进DefinePlugin的键值都是一个标志或者多个用.连接起来的标识符
new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  BROWSER\_SUPPRTS\_HTML5: true,
  VERSION: JSON.stringify('abcde'),
  TWO: '1+1',
  'typeof window': JSON.stringify('object')
})
// 使用方式
console.log('Running App version', VERSION)
if(!BROWSER\_SUPPRTS\_HTML5) require("html5shiv")

// 2⃣ 功能标记 来作为一个flag标识启用和禁用构建中的功能
new webpack.DefinePlugin({
  'SHOW\_PRESSION': JOSN.string(true)
})

// 3⃣ 服务：可以配置不同环境下的url
new webpack.DefinePlugin({
  'DEV\_URL': JSON.stringify(url_dev),
  'PRO\_URL': JSON.stringify(url_pro)
})

// 依赖的源码 - 通过node的path模块获取pages.json文件中的任何信息 (部分是个人注释)
const path = require('path')
const CONFIG = { includes: ['path', 'aliasPath', 'name'] } // 默认获取路由参数属性
// process.cwd() 返回Node.js进程的当前工作目录
// path.resolve(url1, 'abc') => url1/abc
const rootPath = path.resolve(process.cwd(), 'node\_modules'); // 获取根路径

/** 解析绝对路径
 * @param {Object} dir
 */
function resolvePath(dir) {
    return path.resolve(rootPath, dir);
}
// 类
class TransformPages {
    constructor(config) {
    // 组合 自定义获取配置属性
        config = { ...CONFIG, ...config };
        this.CONFIG = config;

    // ↓本机文件路径（HBuilderX包文件里自带的webpack模块路径） /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node\_modules/webpack
        this.webpack = require(resolvePath('webpack'));
        this.uniPagesJSON = require(resolvePath('@dcloudio/uni-cli-shared/lib/pages.js'));

    // TODO: 根据CONFIG解析pages.json中的路由信息 和 小程序 分包下的路由
        this.routes = this.getPagesRoutes().concat(this.getNotMpRoutes());
    }
   // 获取所有pages.json下的内容 返回json
    get pagesJson() {
        return this.uniPagesJSON.getPagesJson();
    }

  // 通过读取pages.json文件 生成直接可用的routes
    getPagesRoutes(pages = this.pagesJson.pages, rootPath = null) {
        const routes = [];
        for (let i = 0; i < pages.length; i++) {
            const item = pages[i];
            const route = {};
            for (let j = 0; j < this.CONFIG.includes.length; j++) {
                const key = this.CONFIG.includes[j];
                let value = item[key];
                if (key === 'path') {
                    value = rootPath ? /${rootPath}/${value} : /${value}
                }
                if (key === 'aliasPath' && i == 0 && rootPath == null) {
                    route[key] = route[key] || '/'
                } else if (value !== undefined) {
                    route[key] = value;
                }
            }
            routes.push(route);
        }
        return routes;
    }

    // &#x89E3;&#x6790;&#x5C0F;&#x7A0B;&#x5E8F;&#x5206;&#x5305;&#x8DEF;&#x5F84;
    getNotMpRoutes() {
        const { subPackages } = this.pagesJson;
        let routes = [];
        if (subPackages == null || subPackages.length == 0) {
            return [];
        }
        for (let i = 0; i < subPackages.length; i++) {
            const subPages = subPackages[i].pages;
            const root = subPackages[i].root;
            const subRoutes = this.getPagesRoutes(subPages, root);
            routes = routes.concat(subRoutes)
        }
        return routes
    }
    /**
 * &#x5355;&#x6761;page&#x5BF9;&#x8C61;&#x89E3;&#x6790;
 * @param {Object} pageCallback
 * @param {Object} subPageCallback
 */
    parsePages(pageCallback, subPageCallback) {
        this.uniPagesJSON.parsePages(this.pagesJson, pageCallback, subPageCallback)
    }
}
module.exports = TransformPages

import {RouterMount,createRouter} from 'uni-simple-router';
const router = createRouter({
  // 路由配置
  routes: [
    {
      path: '/pages/index/index', // 必须和pages.json中相同
      extra: {
        pageStyle: { color: '#f00' }// 及其它自定义参数
      }
    }
  ]
})
// 组件中可以通过 this.$Route 查看路由元信息

• 嵌套路由时，若使用name方式跳转，仅支持 this.$router.push({ name: children1 })

// 使用 vue-router开发将会失去uniapp的生命周期
const router = createRouter({
  h5: {
    vueRouterDev: true, // 完全使用vue-router开发 默认是false
  },
  // 路由配置
  routes: [
    {
      path: '/',
        name: 'home',
      component: () => import('@/common/router/home.vue'),
      // 嵌套路由（仅H5端），小程序端会重新页面打开
      children: [
        {
          path: 'home/children1',
          name: 'children1',
          component: () => import('@/common/router/children1.vue')
        },
        {
          path: 'home/children2',
          name: 'children2',
          component: () => import('@/common/router/children2.vue')
        }
      ]
    }
  ]
})

// 除vue-router外，美化url可以在基础配置时，定义aliasPath变量，设置路由别名（浏览器地址栏展示名称）
// 别名的设置，如果设置了别名，通过push路径的方式，必须使用aliasPath的路径才能生效
const router = createRouter({
  routes:[{
        name:'router1',
        //为了兼容其他端，此时的path不能少，必须和 pages.json中的页面路径匹配
        path: "/pages/tabbar/tabbar-1/tabbar-1",
        aliasPath: '/tabbar-1',
    },]
});

// uni-simple-router路由跳转
// aliasPath命名的路由 => name传递参数需 params
this.$Router.push({ name: 'detail', params: { id: 1 } })
// 带查询参数，变成 /home/id=1 => path 对应query，params失效
this.$Router.push({ path: '/pages/index/detail', query: { id: 1 }})

path：'*' // 通常用于客户端404错误，如果是history模式，需要正确配置服务器
path: '/detail-*'
// 路由的优先级根据 定义的先后

• 打包构建应用时，Javascript包会变得非常大，影响页面加载，把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。
  *

const Foo = () => import('./Foo.vue')
// 把组件按组分块 使用 命名 chunk
const Foo = () => import(/*webpackChunkName:"group-foo"*/ './Foo.vue')
const Bar = () => import(/*webpackChunkName:"group-foo"*/ './Bar.vue')

##### 三、小程序模式

* 注：小程序系列无法拦截原生tabbar及原生导航返回，如需拦截使用自定义tabbar、header
* 通过api进行切换时，像uni.switchTab()和this.$Router.pushTab()方法会触发拦截的；仅底部原生tabbar进行切换时不触发拦截
* 强制触发守卫：forceGuardEach(replaceAll, false) 每次调用api都会重新按流程触发已经声明的所有守卫

    + 小程序端默认：插件api跳转、uni导航api跳转和首屏加载
    + 使用路由守卫：通过点击事件强制触发、混入到onshow回调触发
* 跳转路由锁：animationDuration保留给redirection\push足够时间，等切换完成页面后才放行下次跳转

const router = createRouter({
platform: process.env.VUE_APP_PLATFORM,
// ① 路由锁
applet: {
animationDuration: 300 // 默认300ms
// animationDuration: 0 // 不精准 只捕捉跳转api下的complete函数
},
// ②优雅解锁 error.type: 0 表示 next(false)、1表示next(unknownType)、2表示加锁状态，禁止跳转、3表示在获取页面栈时，页面栈不够level获取
routerErrorEach:(error, router) => {
if (error.type === 3) {
router.$lockStatus = false
}
},
routes: […ROUTES]
})

##### 四、路由跳转

###### 4.1 组件跳转

* vue-router中可以通过router-link组件进行页面跳转，uni-simple-router也提供了类似的组件，需要手动注册
* 
  // main.js
  import Link from './node\_modules/uni-simple-router/dist/link.vue'
  Vue.component('Link', Link)

</code></pre>
<p>*</p>
<pre><code>// 通过path直接跳转 并指定跳转类型
<link to="/tabbar1" navtype="pushTab">
    <button type="primary">使用path对象跳转button>
Link>

</button>
</code></pre>
<pre><code>
###### 4.2 编程式导航

* 通过this.$Router获取路由对象；push、pushTab、replace、back等api进行路由跳转
* 注：path搭配query参数、name搭配params参数
* 导航使用方式同vue-router

##### 五、跨平台模式

###### 5.1 提前享用生命周期

* uniapp由于只用onLoad接受options参数、onShow不接受；传递深度对象参数时，需要先编码再传递解码
* 
  // &#x52A8;&#x6001;&#x6539;&#x53D8;&#x53C2;&#x6570; &#x4F7F; onLoad&#x548C;onShow&#x652F;&#x6301;options
  const router = createRouter({
    platform: process.env.VUE\_APP\_PLATFORM,
    routes: [...ROUTES],
    beforeProxyHooks: {
        onLoad(options, next){
            next([router.currentRoute.query]);
        },
        onShow([options], next){
            console.log(this);
            const args=options||router.currentRoute.query;
            next([args]);
        },
    },
  });

• 全局前置守卫

/**
* to: Route 即将进入的目标
* from: Route 当前导航正要离开的路由
* next: Function 该方法的resolve钩子函数必须调用，执行效果依赖next方法的调用参数
* -- next()调用参数：管道中的下个钩子； next(false)中断当前导航；
* -- next('/')/({path: '/'})跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航
* -- next({delta: 2, NAVTYPE: 'back'}) 中断当前导航，调用新的跳转类型，同时返回两层页面
**/
router.beforeEach((to, from, next) => {
  // ...

  // 1⃣ next()
  // 2⃣ NAVTYPE定义跳转方式，两者相同非必填
  if (to.name == 'tabbar-5') {
        next({
            name: 'router4',
            params: {
                msg: '我拦截了tab5并重定向到了路由4页面上',
            },
            NAVTYPE: 'push'
        });
    } else{
    next();
  }
})

• 全局后置守卫

// 不接受next函数也不改变导航本身
router.afterEach((to,from) => {})

• 路由独享守卫

// 路由配置上直接定义beforeEnter守卫
const router = createRouter({
  routes: [{
    path: '/pages/home/index',
    beforeEnter:(to,from,next) => {
     // 参数同上全局前置守卫
      next()
    }
  }]
})

• 组件内的守卫

// 组件内配置beforeRouteLeave守卫 - 直接调用beforeRouteLeave方法
export default {
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例this
    next()
  }
}

// 1⃣ 创建 router文件夹，模块化配置 文件结构
|+------------------------+|
| router                   |
| |+--------------------+| |
| | modules              | |
| | |+----------------+| | |
| | | home.js          | | |
| | | index.js         | | |
| | |+----------------+| | |
| |+--------------------+| |
| index.js                 |
|+------------------------+|

// home.js
const home = [
  {
    path: '/pages/home/index',
    name: 'home'
  }
]
export default home

// modules下的index.js是一个模块读取
// ① require.context(directory, useSubdirectories, regExp) 具体详情：如下扩三
const files = require.contxt('.',false,/.js$/)
const modules = []

files.keys().froEach(key => {
  if (key === './index.js') return
  const item = files(key).default
  modules.push(...item)
})

export default modules // 将所有模块的路由模块整合到一起， routes Array

// router下的index.js 路由守卫
import modules from './modules/index.js'
import Vue from 'vue'
import CreateRouter from 'uni-simple-router'
import store from '@/store/store.js'

Vue.use(CreateRouter)
//初始化
const router = new CreateRouter({
 APP: {
  holdTabbar: false //默认true
 },
 h5: {
  vueRouterDev: true, //完全使用vue-router开发 默认 false
 },
 // 也可以 通过uni-read-pages来读取pages.json文件的路由表，配合vue.config.js
 // router: [...ROUTES] // ROUTES是通过webpack的defaultPlugin编译成全局变量，具体操作上文
 routes: [...modules] //路由表
});

//全局路由前置守卫
router.beforeEach((to, from, next) => {
 // 首先判断是否存在路由信息
 //不存在就先调用接口得到数据
})
// 全局路由后置守卫
router.afterEach((to, from) => {})
export default router;

// require.context(directory, useSubdirectories, regExp)
// directory: 表示检索的目录
// useSubdirectories: 表示是否检索子文件夹
// regExp: 匹配文件的正则表达式
// 返回值： resolve是一个函数，返回已解析请求的模块ID； keys是一个函数，它返回上下文模块可以处理的所有可能请求的数组；
// 使用场景：①用来组件内引入多个组件；②在main.js内引入大量公共组件；

// ①组件内引入多个组件 - webpack
const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/) //值类型 ['./home.js', 'detail.js',...]
const modules = {}

files.keys().forEach(key => {
  const name = paths.basename(key, '.vue') // 去掉文件名的 .vue后缀
  modules[name] = files(key).default || files(key)
})
// modules { home: '{module样式路径}', detail: '{}', ... }
export default {
    ...,
    data() { return {}},
    components: modules
}

// ②在main.js内引入大量公共组件
import Vue from 'vue'
// 引入自定义组件
const requireComponents = require.context('../views/components',true,'/\.vue/')
// 遍历出每个数组的路径
requireComponents.keys().forEach(fileName => {
  const reqCom = requireComponents(fileName)
  // 获取组件名
  const reqComName = reqCom.name || fileName.replace(/\.\/(.*)\.vue/, '$1')
  // 组件挂载
  Vue.components(reqComName, reqCom.default || reqCom)
})

Original: https://blog.csdn.net/u013190417/article/details/125057190
Author: 虚幻私塾
Title: uni-simple-router