Vue2中通过路由别名获取URL参数code时始终为undefined的问题

这个问题的核心在于你对Vue Router中alias的用法理解有偏差，咱们一步步来解决：

为什么原来的配置拿不到code参数？ #

当你把/settings/:code设为/settings的别名时，访问localhost:8080/settings/123其实是被路由系统映射到了主路由/settings——也就是说，此时$route的路径是/settings，而不是你访问的/settings/123，主路由并没有定义:code参数，所以$route.params.code自然是undefined。

两种可行的解决方案 #

方案1：定义两个指向同一组件的路由 #

直接创建两个独立路由，都指向settings组件，这样两个路径都会各自匹配对应的路由规则，参数也能正常获取：

const routes = [
  {
    path: '/settings',
    name: 'settings',
    component: settings
  },
  {
    path: '/settings/:code',
    name: 'settings-with-code', // 名字可以区分开，也可以用同一个（不推荐）
    component: settings
  }
]

这样访问/settings和/settings/123时，都会正确渲染组件，并且后者能通过this.$route.params.code拿到123。

方案2：使用可选路由参数（Vue Router 4+支持） #

如果你的项目使用的是Vue Router 4及以上版本，可以直接把参数设为可选，用一个路由就能匹配两种场景：

const routes = [
  {
    path: '/settings/:code?', // 问号表示该参数可选
    name: 'settings',
    component: settings
  }
]

这种写法下：

• 访问/settings时，this.$route.params.code为undefined
• 访问/settings/123时，this.$route.params.code为123
  完全符合你的需求，而且代码更简洁。

验证方法 #

你可以在settings组件的mounted钩子中打印this.$route，就能清楚看到两种配置下路由对象的差异：

mounted() {
  console.log(this.$route)
}

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