最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue router动态路由设置参数可选问题
时间:2022-06-25 15:22:51 编辑:袖梨 来源:一聚教程网
在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上。
如下代码想要达到的效果:
不传page和id,则映射到user默认list页面
传page和id,根据page不同,显示不同的页面
问题
使用以下代码片段是不能实现以上效果的,因为默认情况下page和id参数是必传的,如果不传参数,则会根据默认路由跳转到home页面
new Router({ routes: [ { path: '/user/:page/:id', name: 'User', component: () => import('pages/user') }, { path: '*', redirect: '/home' } ] })
解决方法
参数配置改成可选的
path: '/user/:page?/:id?'
ps:下面看下vue-router 动态添加 路由
动态添加路由可以用了做权限管理。登录后服务器端返回权限菜单,前端动态添加路由 然后在设置菜单
1、vue-router 有方法router.addRoutes(routes)
动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。
使用方法
this.$router.options.routes[0].children.push({//插入路由 name:'list', path: 'list', component: resolve => require(['../template/list.vue'], resolve)//将组件用require引进来 }); this.$router.addRoutes(this.$router.options.routes);//调用addRoutes添加路由
我的路由文件:
export default new Router({ routes: [ { path: '/', component: index, }, { path: '/login', name: 'login', component: login } ]
相关文章
- 无期迷途主线前瞻直播总结 无期迷途主线前瞻直播内容介绍 11-22
- 以下哪种非遗技艺是用针在纸上绣画 蚂蚁新村11月21日答案 11-22
- 江南百景图听风塔怎么样 11-22
- 原神恰斯卡圣遗物怎么搭配 11-22
- 2024年霸王茶姬11月22日口令是什么 2024.11.22霸王茶姬口令介绍 11-22
- 光遇11.21季节蜡烛在哪里 光遇11月21日季节蜡烛位置攻略 11-22