将 ID 传递给 Quasar 并在默认设置下使用带子组件的守卫

Question

我正在尝试使用 Quasar 中的默认设置，但很难进行最基本的操作。

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

我之前使用 vue 和 vue-router 进行了此设置，设置 ID 并使用 beforeRouteUpdate 守卫加载适当的记录，这很棒。然后我切换到 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 因为它适用于所有页面，而不仅仅是任务。是否有使用路由器的 prop 刷新数据的最佳实践？

Answer 1

As far as I can see you are loading the same component for /tasks and for /task/:taskId.

所以这不是 Quasar 问题，而是 Vue Router 问题。 Vue Router 为了在看到相同路由的相同组件时是最佳的而不是破坏和重新创建组件。

作为解决方案，您可以在 <router-view></router-view> 组件中添加一个 key 这样当您切换路由时组件将重新渲染：

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

另一种解决方案是在 MyLayout.vue 组件中添加一个观察者，这样每当路由发生变化时，该观察者就会被执行，但组件不会被销毁并重新创建。

watch: {
 // will fire on route changes
'$route': {
  handler(newRoute) {
    if (newRoute.params.taskId) { // if it has `taskId` prop
      // you are in the `/task/:taskId` route
      // add your code here
    }
  },
  immediate: true,
  deep: true
}

Answer 2

我需要为 id 创建一个局部变量并使用它来加载数据。一旦我这样做了，一切都奏效了。我意识到我在标准（非类星体）应用程序上遇到了同样的问题 import { mapState } from 'vuex'

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

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

如果我这样做，即使我直接从 task/5 导航到 task/6

，它似乎也可以在没有 beforeRouteUpdate 的情况下工作

将 ID 传递给 Quasar 并在默认设置下使用带子组件的守卫

Passing an ID to Quasar and use of guards with children components on default setup

vuejs2

vue-router

quasar-framework

quasar