动态路由的Vue路由器问题

【问题标题】：Vue Router issue with dynamic route动态路由的Vue路由器问题
【发布时间】：2019-12-05 18:59:54
【问题描述】：

我正在尝试制作这些路线：

{
  path: '/',
  name: 'home',
  component: Home
},
{
  path: '/:username',
  name: 'login',
  component: Login
},
{
  path: '/dashboard',
  name: 'dashboard',
  component: Dashboard
}

但是当我尝试打开 /dashboard 时，我得到了登录页面。

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案1】：

这里的顺序很重要。你可以交换/dashboard和/:username的位置

[{
  path: '/',
  name: 'home',
  component: Home
},
{
  path: '/dashboard',
    name: 'dashboard',
      component: Dashboard
},
{
  path: '/:username',
  name: 'login',
  component: Login
}]

【讨论】：

哇哦。这只是工作，谢谢！这在文档中有描述吗？
@ittus 也许你可以帮帮我。看看这个：stackoverflow.com/questions/57836601/…

【解决方案2】：

这很正常。路由器从头到尾匹配路由。 /dashboard 完全匹配 /:username 和 username == 'dashboard'

您应该将登录 roote 放在数组的末尾，但更好的是，您最好将其作为前缀以更安全（例如 /user/:username）

【讨论】：