Vue-Router 抽象父路由

Question

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

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

由于其中一些路由共享很多 fx，我将它们设为父路由的子路由：

[{ // 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 base 组件现在在技术上是相同的路由路径，我遇到了路由错误。因为我会有很多路由共享相同的基础组件和 fx，所以我想让它们成为这些抽象状态的子级。

问题 1：如何实现这些路由和它们的父抽象状态而不发生冲突，并且不必将所有包装逻辑添加到子级？

问题 2：我怎样才能使父状态 () 不可路由，或者如果它们是，则默认为子状态？

Answer 1

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

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

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

如果您的 Auth 组件没有特定于身份验证的 UI，您可能不想使用这样的 "abstract" 路由来强制执行身份验证。有很多关于如何在 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 抽象父路由

Vue-Router Abstract Parent Routes

javascript

vue.js

vue-router