Question

我有一个类似/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'),
      },
    ],
  },
];

我不确定以上内容是否正确，以及在用户访问username的情况下如何将myUserName参数设置为/me/profile常量。

**我不想默认将username参数设为myUserName，只有在用户通过/me别名访问该路由的情况下，

Answer 1

据我了解，您不能将别名用于动态路由。我建议您简单地创建另一个名为me的根并将其重定向到/user/yourUserName。我已经准备好了sample fiddle。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/foo', name: 'foo', component: Foo },
        { path: '/user/:username', name: 'user', component: User, children: [
      {
        name: 'user-profile',
        path: 'profile',
        component: Profile,
      },
    ]},
        {path: '/me', redirect: `/user/${someWhereFromSessionUserName}`}
  ]
});

Answer 2

好吧，所以我最终为/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,
  },
];

在beforeEnter钩中，我可以处理用户名。

具有参数

2 个答案: