Vue-Router 抽象父路由 [英] Vue-Router Abstract Parent Routes

问题描述

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

I am trying to migrate my current site to vuejs. The site map must be:

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

由于其中一些路由共享大量效果，我将它们设为父路由的子路由:

As some of these routes share a lot of fx, I've made them the children of parent 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，我想让它们成为这些抽象状态的子级.

The problem is obvious: The Auth and Home base components now are technically the same route path and I get routing errors. Since I will have a lot of routes sharing the same base component and fx, I'd like to have them be children of these abstract states.

问题 1:如何在不冲突的情况下实现这些路由及其父抽象状态，并且不必将所有包装逻辑添加到子级?

Question 1: How can I implement these routes and their parent abstract states without conflict and without having to add all the wrapping logic to the children?

问题 2:如何才能使父状态 () 不可路由，或者如果可以路由，则默认为子状态?

Question 2: How can I make it so the parent states () are not routeable or if they are, the default to a child state?

推荐答案

当多个路由共享同一路径时，数组中的第一个路由优先.所以你需要把 Home 路由放在 Auth 路由之前.这样，/路径将始终匹配 Home 路由而不是 Auth 路由.这也意味着无法直接路由到您想要的 Auth 路由.

Whenever more than one route shares the same path, the first route in the array takes priority. So you need to put the Home route before the Auth route. That way, the / path will always match the Home route and not the Auth route. That also means that it is impossible to route directly to the Auth route, which is what you want.

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

If you do not want the Home route to be accessible, you can specify a redirect that should occur when it is matched exactly:

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

如果您的 Auth 组件没有特定于 auth 的 UI，您可能不想使用像这样的抽象"路由来强制执行身份验证.有很多关于如何在 vue-router 中实现这一点的信息；这是一种方法:

If your Auth component has no auth-specific UI, you mightn't want to use "abstract" routes like this to enforce the authentication. There's plenty of information about how to achieve this in vue-router; here's one way:

// 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 抽象父路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！