vue 动态路由设置参数可选

一、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
  })
}