根据路径组件类型，在多个路由中使用相同的组件
根据路径组件类型，在多个路由中使用相同的组件
提问于 2019-11-01 16:28:56
我试图为多个路由使用一个组件，但取决于路径组件的类型，必须执行不同的操作。我有三项主要意见：
LevelOneView：这是登陆页面，只显示一个搜索小部件。一旦建立了查询，它就会重定向到/search路径，并将查询存储在VueX中。LevelTwoView：此视图显示查询的结果。一旦用户单击结果，就会将它们带到/:id路径LevelThreeView：这个视图显示了清单的细节
这三个视图需要共享一些路径。其想法如下：
/search=>去LevelTwoView，没有特别的工作/:city=> A地点(london，newyork，.)可以插入，并且它应该转到LevelTwoView，查询已经设置为仅搜索该区域中可用的列表。url应该是/search/:id=>使用id作为获取req的参数转到LevelThreeView。这是一个数字
我在beforeEnter路由上设置了一个/:city守卫，以便它检查路径param是否是一个数字，在这种情况下，它应该重定向到LevelThreeView。如果我从/search路径到/:id (甚至从外部直接到/:id路径)运行，这很好，但是如果我从一个LevelThreeView转到一个LevelThreeView，它不工作，并返回这个错误：
Uncaught (in promise) undefined
eval @ vue-router.esm.js?8c4f:2051
abort @ vue-router.esm.js?8c4f:2082
eval @ vue-router.esm.js?8c4f:2131
beforeEnter @ router.js?41cb:43
iterator @ vue-router.esm.js?8c4f:2120
step @ vue-router.esm.js?8c4f:1846
eval @ vue-router.esm.js?8c4f:1847
eval @ vue-router.esm.js?8c4f:2139
eval @ main.js?56d7:115
iterator @ vue-router.esm.js?8c4f:2120
step @ vue-router.esm.js?8c4f:1846
step @ vue-router.esm.js?8c4f:1850
runQueue @ vue-router.esm.js?8c4f:1854
confirmTransition @ vue-router.esm.js?8c4f:2147
transitionTo @ vue-router.esm.js?8c4f:2034
push @ vue-router.esm.js?8c4f:2365
eval @ vue-router.esm.js?8c4f:2779
push @ vue-router.esm.js?8c4f:2778
goToListing @ ListingCard.vue?6c5e:147
click @ ListingCard.vue?917d:18
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911我设置路由器的方式如下：
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'LevelOne',
component: LevelOneView,
beforeEnter: (to, from, next) => {
// Clear the query
store.commit('resetQuery');
return next();
}
},
{
path: '/search',
name: 'LevelTwo',
component: LevelTwoView
},
{
path: '/:city',
name: 'LevelTwoWithCity',
component: LevelTwoView,
beforeEnter(to, _, next) {
// Strip the leading slash
let toPath = to.path.replace("/", "").toLowerCase();
// Check if the path is a number and push the lv3 view
if (!isNaN(toPath)) {
console.log("Router: found valid path for lv 3")
const id = parseInt(toPath);
console.log(id);
return next({name: 'LevelThree', params: { id: id }});
}
// Load up the query
let query = store.getters.getQuery;
// Get the name of all the regions, as a list, to lower case
let regions = query.regions.map(el => el.name.toLowerCase());
// Check if we have a matching one
if (regions.includes(toPath)) {
// First, deactivate them all
query.regions.map(el => el.value = false)
// Then, activate only the one that matched
query.regions.filter(el => el.name.toLowerCase().includes(toPath)).map(el => el.value = true);
// Commit the query
store.commit('setQuery', query);
}
return next();
}
},
{
path: '/:id',
name: 'LevelThree',
component: LevelThreeView,
beforeEnter(to, from, next) {
console.log("Inside Level3 beforeEnter");
next();
}
},
{
path: '/not-found',
name: '404',
component: NotFound,
},
{
path: '*',
name: '404',
component: NotFound,
},
]
})我是这方面的初学者，所以我可能犯了一个小小的错误。如果有人能给我指点，我们将不胜感激。
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-10 18:31:37
最后，我找到了一个“解决办法”。对于每个路由，您可以定义别名。因此，我更改了代码以使用它们，并在启动时加载了所有可能的路由：
// Generate the aliases
let cities = myCities.map(el => "/" + el.name.toLowerCase());
// Get the base case (i.e. the first element to have something to match against)
let baseCity = cities.splice(0, 1)[0];
export default new Router({
...
routes: [
{
path: '/',
...
},
{
path: '/search',
...
},
{
path: baseCity,
name: 'LevelTwoWithCity',
component: LevelTwoView,
alias: cities,
... // Here I set up the query object to be passed on
},
{
path: '/:id',
name: 'LevelThree',
component: LevelThreeView
},
{
path: '*',
name: '404',
component: NotFound,
},
]
})理论上，这可以使用描述的addRoutes()方法( 这里 )来实现。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58662677
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号