美文网首页
vue 动态路由设置参数可选

vue 动态路由设置参数可选

作者: Cute_小肥鸡 | 来源:发表于2022-03-30 10:21 被阅读0次

一、router/index.js 路由文件

1、只有一个参数

{
  path: 'meeting/largeM/:id?', // “ /:id ”代表id必填;“ /:id? ” 代表id可填可不填
  params: {
    id: ''
  },
  name: 'Meeting_largeM',
  component: () => import('@/views/office/meeting/largeM'),
  meta: {
    title: '发起大型会议',
    tabHidden: true, //当前路由是否不显示多标签页
  },
  children: null,
},

2、可以有多个参数

{
  path: 'meeting/addEditReport/:mid/:rid?', 
  params: {
    mid: '',
    rid: '',
  },
  name: 'Meeting_addEditReport',
  component: () => import('@/views/office/meeting/addEditReport'),
  meta: {
    title: '添加会议报道',
    tabHidden: true, //当前路由是否不显示多标签页
  },
  children: null,
},

二、xxx.vue文件

//点击“添加”按钮,传递一个参数
const clickAddReport = () => {
  router.push({
    path: '/office/meeting/addEditReport/'+route.params.id
  })
}

//点击“编辑”按钮,传递多个参数
const clickEditReport = (index) => {
  var thisReportID = state.reportList[index].FID;
  router.push({
    path: '/office/meeting/addEditReport/'+route.params.id+'/'+thisReportID
  })
}

相关文章

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

    一、router/index.js 路由文件 1、只有一个参数 2、可以有多个参数 二、xxx.vue文件

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

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

  • Vue常见面试题

    1.怎么定义vue-router的动态路由?怎么获取传递过来的动态参数? 何为动态路由?能够提供参数的路由即为动态...

  • 9.Vue 动态设置路由参数

    在vue种 可以动态设置路由参数: 1.使用this.$router.go(),与js histroy.go() ...

  • angular 路由传参

    路由必填参数 路由可选参数 路由查询参数

  • vue-router 基础知识

    1. 动态路由匹配 路径参数以 : 标记,参数值会被设置到this.$route.params。使用路由参数,例如...

  • 第三十六节:Vue路由:Vue-router路由传参

    前沿: vue-router的路由跳转时传递参数有两种方式,: 一种是路由参数, 通过定义动态路由传递参数 另一种...

  • 第三十六节:Vue路由:Vue-router路由传参

    前沿: vue-router的路由跳转时传递参数有两种方式,: 一种是路由参数, 通过定义动态路由传递参数 另一种...

  • Vue知识点

    vue-router 在mounted函数中获取从路由地址带过来的参数: 定义动态路由: { path: 'new...

  • element参数管理

    1.参数管理 A.展示动态参数可选项 动态参数可选项展示及操作在获取动态参数的方法中进行处理。 B.添加/删除可选...

网友评论

      本文标题:vue 动态路由设置参数可选

      本文链接:https://www.haomeiwen.com/subject/xhpijrtx.html