uniapp router（uniapp-路由uni-simple-router）

背景

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

安装 

// 项目根目录执行命令行 npm install uni-simple-router // 根据pages.json总的页面，自动构建路由表 npm install uni-read-pages

 配置vue.config.js

注：如果根目录没有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,meta] }); return JSON.stringify(tfPages.routes) }, true) }) ] } }

 新建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) => { //权限控制登录 if(to.meta.auth){ console.log("需要登录"); if("token"){ next(); }else{ console.log("请登录"); } }else{ console.log("不需要登录"); next(); } console.log("前置守卫"+JSON.stringify(to)); }); // 全局路由后置守卫 router.afterEach((to, from) => { console.log(跳转结束) }) export { router, RouterMount }

main.js

import {router,RouterMount} from ./router/router.js //路径换成自己的 Vue.use(router) //v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式 // #ifdef H5 RouterMount(app,router,#app) // #endif // #ifndef H5 app.$mount(); //为了兼容小程序及app端必须这样写才有效果 // #endif

 page.json

{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "name": "index", "style": { "navigationBarTitleText": "uni-app" } }, { "path": "pages/home/home", "name": "home", "meta": { "auth": false, //需要登录 "async": true, //是否同步 "title": "首页", //标题 "group": "商城" //分组 }, "style": { "navigationBarTitleText": "", "enablePullDownRefresh": false } },{ "path": "pages/haha/haha", "name": "haha", "meta": { "auth": true, //需要登录 "async": true, //是否同步 "title": "首页", //标题 "group": "商城" //分组 }, "style": { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" } }

 页面跳转和参数接收

push() pushTab() : 跳转tar栏 replace() : 替换 replaceAll() ： 替换所有 back() : 直接带上数字返回第几层 注意：path和query配合使用，而name和params配合使用 //通过name方式跳转 this.$Router.push({ name: home, params: { name: Joseph, age: 22 } }) ------------------------------------ //通过path形式进行跳转 this.$Router.push({ path: /pages/haha/haha, query: { name: Josdep33333h, age: 24 } }) ------------------------------------- //用uni形式跳转到新页面,并传递参数 uni.navigateTo({ url:/pages/home/home?id=2&name=Josep33333h }); // 页面接收参数——query中的参数 onLoad(){ // query传参 const query=this.$Route.query // params传参 const params=this.$Route.params }

组件

// 首先在main.js中进行注册，将my-link注册为全局组件，注册后使用方法同<router-link> import Mylink from ./node_modules/uni-simple-router/dist/link.vue Vue.component(my-link,Mylink) // 使用 // navType对应的就是push/pushTab/replace/replaceAll <my-link to="{path: /pages/mine/index,query: {name: 我只想去tab5的my-link}}" navType="pushTab"> <button type="default">我是router-link</button> </my-link> onLoad(option) { //原生获取数据 console.log("zz",option); // query传参 const query=this.$Route.query console.log(query); // params传参 const params=this.$Route.params console.log(params); }

详情使用参考

uni-simple-router - xsk-walter - 博客园