时间戳

首页 > 解决方案 > 将 ID 传递给 Quasar 并在默认设置中使用带有子组件的守卫

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

问题描述

我正在尝试使用 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 因为它适用于所有页面，而不仅仅是任务。是否有使用路由器的道具刷新数据的最佳实践？

标签： vuejs2vue-routerquasar-frameworkquasar

解决方案

据我所见，您正在为/tasks和加载相同的组件/task/:taskId。

所以这不是 Quasar 问题，而是 Vue 路由器问题。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
}

推荐阅读