Question

我试图将一个组件用于多个路由，但是根据路径组件的类型，必须执行不同的操作。我有三个主要观点：

LevelOneView：这是登录页面，仅显示搜索窗口小部件。设置查询后，它将重定向到/search路径并将查询存储在VueX
LevelTwoView：此视图显示查询结果。用户单击结果后，会将其带到/:id路径
LevelThreeView：此视图显示列表的详细信息

这三个视图需要共享一些路径。这个想法如下：

/search =>转到LevelTwoView，无需任何特殊工作
/:city =>可以插入一个位置（london，newyork，...），它应该转到LevelTwoView，且查询已设置为搜索仅该地区可用的列表。网址应为/search
/:id =>使用LevelThreeView作为获取请求的参数，转到id。这是一个数字

我在beforeEnter路由上设置了/:city防护，以便它检查路径参数是否为数字，并且在这种情况下，它应该重定向到LevelThreeView。如果我要从/search到/:id的路径（或者甚至是从外面直接到/:id的路径），那么如果我要从{{1} }到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

我是一个初学者，所以我可能犯了一个小错误。如果有人可以给我任何指示，将不胜感激。

谢谢！

Answer 1

最后，我已经找到了“解决方法”。对于每条路线，您都可以定义aliases。因此，我更改了代码以使用它们，并在启动时加载了所有可能的路由：

// 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,
    },
  ]
})

从理论上讲，这可以使用here中所述的addRoutes()方法来实现。

根据路径组件类型，

1 个答案: