Vuejs2 将ID传递给Quasar，并在默认设置中使用带子组件的防护装置

我正在尝试使用Quasar中的默认设置，但在最基本的操作方面遇到了困难

我有一个路线/任务的任务列表，它链接到任务/taskId（即task/5）中的各个项目

我以前使用vue和vue路由器进行了此设置，并且正在使用beforeRouteUpdate保护设置ID并加载相应的记录，这非常棒。然后我切换到Quasar，使用基本cli进行设置。任务路由现在是主布局组件的子级，这意味着不会从子级中调用beforeRouteUpdate。我曾尝试使用beforeEnter作为每路线守卫，文档中说它可以访问“this”，但结果是未定义

我肯定遗漏了什么，因为路由到/tasks和task/5应该是最基本的，我认为在默认的Quasar安装中有实现这一点的最佳实践

我的路线：

{
  path: '/tasks',
  name: 'tasks',
  component: () => import('layouts/MyLayout.vue'),
  children: [
    { path: '', component: () => import('pages/tasks/Index.vue') }
  ]
},
{
  path: '/task/:taskId',
  name: 'task',
  component: () => import('layouts/MyLayout.vue'),
  children: [
    { path: '', component: () => import('pages/tasks/Show.vue') }
  ],
  props: true
},

我不确定还要包含哪些代码，从我的子组件发布beforeRouteUpdate毫无意义，因为它没有被调用。我无法放入父组件MyLayout.vue，因为它适用于所有页面，而不仅仅是任务。是否有使用路由器的道具刷新数据的最佳实践

据我所知，您正在为

/tasks

和

/task/：taskId

加载相同的组件

所以这不是类星体问题，而是Vue路由器问题。Vue路由器为了在看到同一路由的同一组件时达到最佳状态，没有销毁和重新创建该组件

作为解决方案，您可以在

组件中添加

键

，以便在切换路由时组件将重新渲染：

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

据我所知，您正在为

/tasks

和

/task/：taskId

加载相同的组件

所以这不是类星体问题，而是Vue路由器问题。Vue路由器为了在看到同一路由的同一组件时达到最佳状态，没有销毁和重新创建该组件

作为解决方案，您可以在

组件中添加

键

，以便在切换路由时组件将重新渲染：

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

---

我需要为id创建一个局部变量，并使用它来加载数据。一旦我这么做了，一切都正常了。我意识到我在从“vuex”导入标准（非类星体）应用程序{mapState}时遇到了同样的问题

export default {
  props: ['taskId'],
  data () {
    return {
      id: this.taskId
    }
  },

  this.$store.dispatch('tasks/fetchTask', this.id)

---

如果我这样做，它似乎在没有beforeRouteUpdate的情况下工作，即使我直接从task/5导航到task/6，我也需要为id创建一个局部变量，并使用该变量加载数据。一旦我这么做了，一切都正常了。我意识到我在从“vuex”导入标准（非类星体）应用程序{mapState}时遇到了同样的问题

export default {
  props: ['taskId'],
  data () {
    return {
      id: this.taskId
    }
  },

  this.$store.dispatch('tasks/fetchTask', this.id)

---

如果我这样做，它似乎可以在没有beforeRouteUpdate的情况下工作，即使我直接从task/5导航到task/6

相同的组件，但具有不同子级的不同实例。我刚把问题贴出来就明白了。这与试图操纵taskId有关。我必须创建一个局部变量来处理。我没有像在基本的vue路由器SPA上那样遇到错误。事实上-我以为我遇到了错误，然后在问题持续出现时重新查看了您的答案，并添加：关键成功了。谢谢相同的组件，但具有不同子级的不同实例。我刚把问题贴出来就明白了。这与试图操纵taskId有关。我必须创建一个局部变量来处理。我没有像在基本的vue路由器SPA上那样遇到错误。事实上-我以为我遇到了错误，然后在问题持续出现时重新查看了您的答案，并添加：关键成功了。谢谢