最新下载
热门教程
- 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-07
- 宝可梦大集结新手宝可梦怎么选 11-07
- 光遇11.7每日任务怎么做 11-07
- 英雄联盟双城之战2主题曲怎么样 11-07
- 《怪物猎人荒野》锁头机制介绍 11-07
- 逆水寒手游流派首席竞选怎么玩 逆水寒手游流派首席竞选玩法介绍 11-07