[英]Vue-Router Abstract Parent Routes
我正在尝试将当前站点迁移到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基本组件现在在技术上是相同的路径路径,我得到路由错误。 由于我将有很多路由共享相同的基本组件和fx,我想让他们成为这些抽象状态的孩子。
问题1 :如何在不冲突的情况下实现这些路由及其父抽象状态,而无需将所有包装逻辑添加到子项中?
问题2 :我怎样才能使父状态()不可路由,或者如果是,则默认为子状态?
只要多个路由共享相同的路径,阵列中的第一个路由就会优先。 所以你需要在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,您可能不希望使用这样的“抽象”路由来强制执行身份验证。 有关如何在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();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.