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
  })
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容