如何用uniapp结合uni-simple-router实现复杂长尾词路由配置？

本文共计697个文字，预计阅读时间需要3分钟。

目录+正文+安装+配置+router文件夹下的js文件main.js+page.json+页面跳转和参数接收+获取参数+正文+要在uniapp中使用路由守卫，uniapp原生的api比较缺乏，所以需要使用uni-simple-router插件包

目录

• 正文
• 安装
• 配置
• router文件夹下对应的 js文件
• main.js
• page.json
• 页面跳转和参数接收
• 获取参数

正文

要在uniapp中使用路由守卫，uniapp原生的api是比较欠缺的，所以要用‘uni-simple-router’插件包

安装

// 项目根目录执行命令行 下载稳定版本 npm install uni-simple-router@2.0.7 // 根据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数组中第一项表示应用启动页，参考：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' });

获取参数

onLoad(option) { //原生获取数据 console.log("zz",option); // query传参 const query=this.$Route.query console.log(query); // params传参 const params=this.$Route.params console.log(params); }

以上就是uniapp路由uni-simple-router使用示例的详细内容，更多关于uniapp路由uni-simple-router的资料请关注自由互联其它相关文章！