uniapp路由uni-simple-router使用示例
作者:小李不小
这篇文章主要为大家介绍了uniapp路由uni-simple-router使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
正文
要在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数组中第一项表示应用启动页,参考: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' });
获取参数
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的资料请关注脚本之家其它相关文章!