Передача идентификатора в Quasar и использование сторожей с дочерними компонентами по умолчанию - PullRequest
Новая
       34

Передача идентификатора в Quasar и использование сторожей с дочерними компонентами по умолчанию

0 голосов
/ 08 февраля 2020

Я пытаюсь работать с настройками по умолчанию в Quasar и с трудом справляюсь с самой основной c операцией.

У меня есть список задач на маршруте / задач, который ссылается на отдельные элементы в task / taskId (ie, task / 5).

У меня была эта настройка с использованием vue и vue -рутера ранее, и я устанавливал идентификатор и загружал соответствующую запись с помощью защиты beforeRouteUpdate, и это было здорово. Затем я переключился на Quasar, настройка с basi c cli. Маршрут задачи теперь является дочерним по отношению к основному компоненту макета, что означает, что beforeRouteUpdate не вызывается из дочернего элемента. Я пытался использовать beforeEnter как средство защиты на маршруте, которое в документации говорит, что у него есть доступ к 'this', но это приводит к неопределенности.

Я должен что-то упустить, потому что при маршрутизации к / tasks и Задача / 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
},

Я не уверен, какой другой код использовать include, нет смысла публиковать beforeRouteUpdate из моего дочернего компонента, так как он не вызывается. Я не могу вставить родительский компонент MyLayout. vue, потому что он работает для всех страниц, а не только для задач. Есть ли лучшая практика для обновления данных, используя реквизит от маршрутизатора?

Ответы [ 2 ]

1 голос
/ 08 февраля 2020

Насколько я вижу, вы загружаете один и тот же компонент для /tasks и для /task/:taskId.

Так что это не проблема Quasar, а маршрутизатор Vue один. Vue Маршрутизатор, чтобы быть оптимальным, когда видит один и тот же компонент для одного и того же маршрута, не разрушает и не воссоздает компонент.

В качестве решения, в компоненте <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
}
0 голосов
/ 08 февраля 2020

Мне нужно было создать локальную переменную для идентификатора и работать с ней для загрузки данных. Как только я это сделал, все заработало. Я понял, что у меня возникла та же проблема со стандартным (не Quasar) импортом приложения {mapState} из 'vuex' 

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

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

Если я делаю это таким образом, кажется, что он работает без beforeRouteUpdate, даже если я перейти непосредственно от задачи / 5 к задаче / 6

...