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 相关文章推荐
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
vue实现公共方法抽离
Jul 31 Javascript
JavaScript代码实现简单计算器
Dec 27 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
php判断是否为json格式的方法
2014/03/04 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
python使用mysql数据库示例代码
2017/05/21 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Python3 log10()函数简单用法
2019/02/19 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
2014年人民警察入党思想汇报
2014/10/12 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
学校隐患排查制度
2015/08/05 职场文书
转变工作作风心得体会
2016/01/23 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL