Vue воссоздает родительский компонент при изменении маршрутов - PullRequest
Новая
       6

Vue воссоздает родительский компонент при изменении маршрутов

0 голосов
/ 24 января 2019

Я использую Vue.js с Vue-router в проекте, и проблема в том, что компонент, включающий в себя router-view, уничтожается при изменении маршрута.Это означает, что все остальные компоненты на странице уничтожены, поэтому все выглядит как обновление страницы.

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

Я попытался воспроизвести проблему в скрипке, но безуспешно.Вот код шаблонов: 

<div id="router-app">
  <router-view></router-view>
</div>

<template id="tricky-place">
  <div>
    <h1>Tricky place</h1>
    <ul>
      <li>
        <router-link to="/panel1">Panel1</router-link>
      </li>
      <li>
        <router-link to="/panel2">Panel2</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<template id="tricky-place-panel1">
  <div>
    <h2>Panel1</h2>
  </div>
</template>

<template id="tricky-place-panel2">
  <div>
    <h2>Panel2</h2>
  </div>
</template>

и скрипт: 

const TrickyPlace = Vue.component('tricky-place', {
    created() {
      console.log("TrickyPlace - created");
    },
    mounted() {
        console.log("TrickyPlace - mounted");
    },
    updated() {
        console.log("TrickyPlace - updated");
    },
    destroyed() {
       console.log("TrickyPlace - destroyed");
    },
  template: '#tricky-place'
});

const TrickyPlacePanel1 = Vue.component('tricky-place-panel1', {
  created() {
    console.log("TrickyPlacePanel1 - created");
  },
  mounted() {
    console.log("TrickyPlacePanel1 - mounted");
  },
  updated() {
    console.log("TrickyPlacePanel1 - updated");
  },
  destroyed() {
    console.log("TrickyPlacePanel1 - destroyed");
  },
  template: '#tricky-place-panel1'
});

const TrickyPlacePanel2 = Vue.component('tricky-place-panel2', {
  created() {
    console.log("TrickyPlacePanel2 - created");
  },
  mounted() {
    console.log("TrickyPlacePanel2 - mounted");
  },
  updated() {
    console.log("TrickyPlacePanel2 - updated");
  },
  destroyed() {
    console.log("TrickyPlacePanel2 - destroyed");
  },
  template: '#tricky-place-panel2'
});

const routes = [{
  path: '/',
  component: TrickyPlace,
  children: [{
    path: 'panel1',
    component: TrickyPlacePanel1
  }, {
    path: 'panel2',
    component: TrickyPlacePanel2
  }, ]
}]
const router = new VueRouter({
  routes
});

const routerApp = new Vue({
  router,
  el: '#router-app',
});

Вот скрипка: https://jsfiddle.net/loorker/m1hncLb0/15/

Вот журнал консоли, когда я загружаю скрипку,нажмите на Panel1, затем на Panel2: 

TrickyPlace - created
TrickyPlace - mounted

TrickyPlacePanel1 - created
TrickyPlacePanel1 - mounted
TrickyPlace - updated

TrickyPlacePanel2 - created
TrickyPlacePanel1 - destroyed
TrickyPlacePanel2 - mounted
TrickyPlace - updated

Это, как и ожидалось.

И вот журнал консоли для той же последовательности операций, когда я запускаю тот же код в моем приложении: 

TrickyPlace - created
TrickyPlace - mounted

TrickyPlace - created
TrickyPlacePanel1 - created
TrickyPlace - destroyed
TrickyPlacePanel1 - mounted
TrickyPlace - mounted

TrickyPlace - created
TrickyPlacePanel2 - created
TrickyPlacePanel1 - destroyed
TrickyPlace - destroyed
TrickyPlacePanel2 - mounted
TrickyPlace - mounted

TrickyPlace уничтожается и создается при каждом изменении маршрута, а не обновляется как в скрипте.

Другими словами, рассматривая цифру в https://vuejs.org/v2/guide/instance.html, что происходит вмое приложение заключается в том, что в красном круге с надписью Mounting поток выполнения не принимает путь «когда данные изменяются», а идет прямо к «когда вызывается vm. $ destroy ()».

Iпопытался установить режим маршрутизатора на «историю», но он ведет себя так же.В приложении нигде нет вызова $ destroy ().У меня нет привязки: ключа, установленной в представлении маршрутизатора.

Есть мысли о том, как я могу продолжить, чтобы найти проблему, почему созданный / уничтоженный вызывается для родителя, а не просто для обновления?

Спасибо.

1 Ответ

0 голосов
/ 24 января 2019

Только что нашел проблему.Был <router-view> с :key="$route.fullPath" выше в иерархии компонентов ...

Как описано здесь :

Если вы связываете key$route.fullPath, он всегда будет "принудительно заменять" элемент / компонент <router-view> каждый раз, когда происходит событие навигации.

...