vue router动态路由设置参数可选问题


Posted in Javascript onAugust 21, 2019

在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上。

如下代码想要达到的效果:

不传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
  }
 ]

总结

以上所述是小编给大家介绍的vue router动态路由设置参数可选问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
javascript实现左右缓动动画函数
Nov 25 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 #Javascript
js时间转换毫秒的实例代码
Aug 21 #Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 #Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 #jQuery
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 #Javascript
Vue仿微信app页面跳转动画效果
Aug 21 #Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 #Javascript
You might like
php打开文件fopen函数的使用说明
2013/07/05 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
php微信开发之图片回复功能
2018/06/14 PHP
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
Python selenium文件上传方法汇总
2020/11/19 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
python操作redis方法总结
2018/06/06 Python
eclipse创建python项目步骤详解
2019/05/10 Python
python实现图片压缩代码实例
2019/08/12 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
《雪儿》教学反思
2014/04/17 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
明确岗位职责
2015/02/14 职场文书
优秀英文求职信范文
2015/03/19 职场文书
学校远程教育工作总结
2015/08/11 职场文书
中学生运动会广播稿
2015/08/19 职场文书
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang