如何在vue-router中配置可选路由？含router-link场景示例

这事儿好办，只需要把路由参数设置为可选的就能同时支持两种路径了，具体步骤如下：

1. 修改路由配置 #

在你的route.js里，把路由的path改成带可选参数的格式——在参数名后面加?，就表示这个参数是可选的：

// route.js
{
  path: 'foo/bar/:id?', // ? 标记让 id 参数变为可选
  component: fooComponent()
}

这样配置后，/foo/bar（不带参数）和/foo/bar/1（带id参数）都会匹配到这个路由。

2. router-link 的使用 #

你现有的router-link写法完全没问题：

<router-link :to="{path: '/foo/bar', params: {id: 1}}">跳转</router-link>

当你传入params.id时，Vue Router会自动拼接出/foo/bar/1的路径；如果想要跳转到不带参数的/foo/bar，只需要去掉params或者把id设为undefined即可：

// 直接跳转到无参数路径
<router-link :to="{path: '/foo/bar'}">跳转</router-link>
// 或者显式设置id为undefined
<router-link :to="{path: '/foo/bar', params: {id: undefined}}">跳转</router-link>

3. 组件内获取参数 #

因为id是可选参数，在fooComponent里获取时要注意它可能为undefined：

// 组件内部示例
mounted() {
  const id = this.$route.params.id;
  if (id) {
    // 处理带id的业务逻辑
  } else {
    // 处理无id的业务逻辑
  }
}

如果想让组件和路由解耦（更推荐的写法），可以开启路由的props选项：

// route.js
{
  path: 'foo/bar/:id?',
  component: fooComponent(),
  props: true // 自动将路由参数作为props传递给组件
}

然后在组件里定义props接收：

<script>
export default {
  props: {
    id: {
      type: String, // 路由参数默认是字符串，需要数字的话可以自行转换
      default: null
    }
  },
  mounted() {
    if (this.id) {
      // 处理带id的逻辑
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者hidar