Question

我正在尝试将当前网站迁移到vuejs。站点地图必须是：

/login
/signup
/password-reset
/browse
/search
... dozens of other routes

由于其中一些路线共享很多外汇，我已将它们作为父路线的子女：

[{ // public routes
  path: '/', 
  component: Auth,
  children: [
    { path: '/login', component: Login },
    { path: '/signup', component: Signup },
    { path: '/password-reset', component: PasswordReset },
  ]
}, 
{ // routes behind Authentication
  path: '/', 
  component: Home,
  children: [
    { path: '/browse', component: Browse },
    { path: '/search', component: Search }
  ]
}]

问题很明显：Auth和Home基本组件现在在技术上是相同的路径路径，我得到路由错误。由于我将有很多路由共享相同的基本组件和fx，我希望让它们成为这些抽象状态的孩子。

问题1 ：如何在不冲突的情况下实现这些路由及其父抽象状态，而无需将所有包装逻辑添加到子项中？

问题2 ：我如何才能使父状态（）不可路由，或者如果是，则默认为子状态？

Answer 1

每当多条路由共享同一条路径时，数组中的第一条路由优先。所以你需要在Auth路线之前放置Home路线。这样，/ path将始终匹配Home路由而不是Auth路由。这也意味着不可能直接路由到Auth路线，这就是你想要的。

如果您不希望可以访问Home路由，则可以指定在完全匹配时应发生的重定向：

{
  path: '/',
  component: Home,
  redirect: '/browse',           // Redirect to path, or
  redirect: { name: 'browse' },  // Redirect to named route
  children: ...
}

如果您的Auth组件没有特定于身份验证的UI，您可能不想使用＆＃34; abstract＆＃34;像这样的路由来强制执行身份验证。有关如何在vue-router中实现此目的的大量信息;这是一种方式：

// Routes

{
  path: '/profile',
  component: Profile,
  meta: { auth: true },
}

// Router hooks

router.beforeEach((to, from, next) => {
  if (to.matched.some(route => route.meta.auth) && !authenticated) {
    next('/login');
  } else {
    next();
  }
});

Vue-Router抽象父路由

1 个答案: