Question

我有一个视图，其中包含带有路线的项目列表：

{
  path: "/items",
  name: "items",
  component: () => import("./myViews/itemsView.vue")
},

如果我单击其中之一，则会进入路线：

{
  path: "/items/:id",
  name: "singleItem",
  ***component: () => import("./myViews/singleItemView.vue")***
},

在该视图中，我还有其他项目的另一个列表，并且我需要路线如下所示：

{
  path: "/items/:id/:subId",
  name: "singleSubItem",
  ***component: () => import("./myViews/singleItemView.vue")***
},

并且我需要对两个路由使用相同的组件singleItemView。

当我在“ / items /：id”时，我正在侦听子组件发出的值，然后按以下方式进行路由：

<myComponent @completed="$router.push({name: 'singleSubItme', params: {id: 'id', subId:'subId'})"></myComponent>

URL确实发生了变化，但是它使相同的组件处于相同的状态，我希望它重新加载。

Answer 1

一种可能的解决方案是将:key添加到您的router-view中以强制其重新呈现

<router-view :key="$route.fullPath"></router-view>

您还可以在$route内观看singleItemView.vue进行自定义操作（例如，调用API）

watch: {
  '$route'(to, from) {
    const {id, subId} = to.params
    if (subId) {
      // do something
    } else {
      // do something else
    }
  }
},

如何在vue-router中将相同组件用于嵌套路由

1 个答案: