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

 更新时间:2019-08-22 04:59:15   作者:佚名   我要评论(0)

在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上。
如下代码想要达到的效果:

不传page和id,则映射到user默认list页面
传page和id,根据page不

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

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

不传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动态路由设置参数可选问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

您可能感兴趣的文章:

  • 使用VueRouter的addRoutes方法实现动态添加用户的权限路由
  • vue-router之nuxt动态路由设置的两种方法小结
  • 基于vue-router 多级路由redirect 重定向的问题
  • 全面解析vue router 基本使用(动态路由,嵌套路由)
  • 详解vue2路由vue-router配置(懒加载)
  • vue2笔记 — vue-router路由懒加载的实现
  • VueJs路由跳转——vue-router的使用详解

相关文章

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

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

    在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上。 如下代码想要达到的效果: 不传page和id,则映射到user默认list页面 传page和id,根据page不
    2019-08-22
  • Docker下安装ElasticSearch和Kibana的示例代码

    Docker下安装ElasticSearch和Kibana的示例代码

    1.前言 现在elasticsearch是比较火的,很多公司都在用,所以如果说还不知道es可能就会被人鄙视了。所以这里我就下决心来学习es,我比较钟爱于docker所有也
    2019-08-22
  • Python爬虫:将headers请求头字符串转为字典的方法

    Python爬虫:将headers请求头字符串转为字典的方法

    原生请求头字符串 raw_headers = """Host: open.tool.hexun.com Pragma: no-cache Cache-Control: no-cache User-Agent: Mozilla/5.0 (Macintosh; Intel Ma
    2019-08-22
  • Python GUI学习之登录系统界面篇

    Python GUI学习之登录系统界面篇

    导言篇: 我的python环境是:python3.6.5 这里我选择的GUI编程包是:tkinter tkinker在python2.5以后就是自带包了,所以我们不需要另外安装 tkinker相对与其他
    2019-08-22
  • Python爬虫:url中带字典列表参数的编码转换方法

    Python爬虫:url中带字典列表参数的编码转换方法

    平时见到的url参数都是key-value, 一般vlaue都是字符串类型的 如果有幸和我一样遇到字典,列表等参数,那么就幸运了 python2代码 import json from urllib
    2019-08-22
  • 一文详解Spring任务执行和调度(小结)

    一文详解Spring任务执行和调度(小结)

    一、概述 Spring框架分别使用TaskExecutor和TaskScheduler接口提供异步执行和任务调度的抽象。Spring还提供了这些接口的实现,这些接口支持线程池或将其委
    2019-08-22
  • mac系统下mysql 8.0.11 安装指南

    mac系统下mysql 8.0.11 安装指南

    MAC 安装mysql8.0,具体内容如下 1. 下载地址 2. 选择版本8.0: 我们选择dmg格式 3. 下载完成点击dmg文件开始安装 4. 点击安装完成,即可。 5. &#98
    2019-08-22
  • python通过robert、sobel、Laplace算子实现图像边缘提取详解

    python通过robert、sobel、Laplace算子实现图像边缘提取详解

    实现思路:   1,将传进来的图片矩阵用算子进行卷积求和(卷积和取绝对值)   2,用新的矩阵(与原图一样大小)去接收每次的卷积和的值   3,卷积图片所
    2019-08-22
  • 优惠狗云发单解析有惠还可以0元购物吗?

    优惠狗云发单解析有惠还可以0元购物吗?

    正规项目瑕苑豆宝购物省钱有惠淘宝天猫拼多多 有惠我推广了 两个星期了,不过我发现很多朋友不知道怎么用有惠购物省钱,甚至不知道有惠有一个新人免单的活动(0元购)。 首先,还没注册有惠的用户,赶紧微信扫码注册: 温馨提示:如果是电脑浏览文章,直接打开微信扫码即可;如果是手机用户浏览文章的,直接长按图片或者截图保存二维码,打开微信扫一扫功能时,点击右上角可以从相册选择二维码图片扫码,即可下载啦~ 其次,不知道怎么使用有惠在淘宝/天猫/京东/拼多多购物省钱的可以看这里的教程: 最后,咱们
    2019-08-21
  • 在pytorch中查看可训练参数的例子

    在pytorch中查看可训练参数的例子

    pytorch中我们有时候可能需要设定某些变量是参与训练的,这时候就需要查看哪些是可训练参数,以确定这些设置是成功的。 pytorch中model.parameters()函数定义
    2019-08-19

最新评论