Vue.js 带参数的vue路由的别名

我有一个像这样的用户配置文件路由

/user/Mary/profile

，在这里我可以看到任何用户配置文件，我想创建一个像

/me/profile

这样的别名，以便隐藏用户名参数，并使用常量代替该参数

比如：

const myUserName = 'Mike';

export default [
  {
    name: 'user',
    path: 'user/:username',
    alias: 'me',
    component: () => import('components/user-layout'),
    children: [
      {
        name: 'user-profile',
        path: 'profile',
        component: () => import('components/user-profile'),
      },
    ],
  },
];

我不确定以上是否正确，以及在用户访问

/me/profile

时如何将

username

参数设置为

myUserName

常量

---

**默认情况下，我不希望

username

param成为

myUserName

，仅当用户通过

/me

别名访问该路由时，据我所知，您不能将别名用于动态路由。我建议您只需创建另一个名为

me

的根目录，并将其重定向到

/user/yourUserName

。我已经准备好了一份工作

---

好的，所以我最终为

/me

创建了另一个路由，没有创建别名或重定向，只是一个普通路由，它和

/user

之间有共享的子级，如下所示：

import userChildrenRoutes from './user-children.routes';

export default [
  {
    name: 'me',
    path: 'me',
    component: () => import('components/user-layout'),
    children: userChildrenRoutes,
  },
  {
    name: 'user',
    path: 'user/:username',
    component: () => import('components/user-profile'),
    children: userChildrenRoutes,
  },
];

---

在

beforenter

hook中，我可以处理用户名。

非常感谢@dganenco在这个答案上花了大量时间，但这并不能解决我的问题，因为我需要为用户不断显示

/me

url，而不是将其重定向到

/user

。在这种情况下，您可以尝试使用hook，尤其是hook。我已经更新了，请让我知道它是否有效。这是一个非常好的问题。thx，我以前尝试过这个，但没有成功，我无法在浏览器地址栏中看到

/me

，我通过创建另一个独立的路由来管理它，正如您在我的回答中所看到的

import userChildrenRoutes from './user-children.routes';

export default [
  {
    name: 'me',
    path: 'me',
    component: () => import('components/user-layout'),
    children: userChildrenRoutes,
  },
  {
    name: 'user',
    path: 'user/:username',
    component: () => import('components/user-profile'),
    children: userChildrenRoutes,
  },
];