我正在尝试将我当前的站点迁移到 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:我怎样才能使父状态 () 不可路由,或者如果它们是,则默认为子状态?
最佳答案
当多个路由共享同一条路径时,数组中的第一条路由优先。所以你需要把 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,您可能不想使用这样的“抽象”路由来强制执行身份验证。有很多关于如何在 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();
}
});
关于javascript - Vue-Router 抽象父路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44663978/