vue-router не рендерит новые компоненты при изменении маршрута - PullRequest
Новая
       6

vue-router не рендерит новые компоненты при изменении маршрута

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

У меня есть действительно простой минимальный пример страницы с vue-router, который работает только частично.

app.js 

import 'babel-polyfill';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './app.vue';
import router from './router'

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

app.vue 

<template>
  <div class="container">
        <div id="nav">
          <router-link to="/">Page 1</router-link>|
          <router-link to="/page2">Page 2</router-link>
          <router-link to="/sretbs">No page</router-link>
        </div>
        <div style="border:5px solid green">
          <router-view></router-view>
        </div>
  </div>
</template>

<script>
export default {};
</script>

router.js 

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from './page1.vue';
import Page2 from './page2.vue';
import ErrorPage from './error.vue';

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/page1', name: 'page1', component: Page1 },
    { path: '/page2', name: 'page2', component: Page2 },
    { path: '*', component: ErrorPage }
  ],
  redirect: {
    "/": "page1"
  }
})

Кажется, что <router-view> работает при первой загрузке страницы.Он показывает ожидаемый компонент для любого маршрута, который в данный момент находится в URL-адресе (например, localhost/test#/page2), или, если я явно переадресовываю маршрут.push перед привязкой Vue к #app, он также показывает ожидаемый компонент.

Переход кдругие маршруты не работают полностью или, по крайней мере, не отображают новый маршрут.Когда я добавляю выходные данные отладки к таким компонентам страницы, как: 

<template>
  <div class="container">
    <h2>this is page 2</h2>
    <buttons></buttons>
  </div>
</template>

<script>
export default {
  beforeRouteEnter: function(to, from, next) {
    console.log(`Entering page 2:`);
    next();
  },
  beforeRouteLeave: function(to, from, next) {
    console.log(`Leaving page 2`);
    next();
  },
  beforeRouteUpdate: function() {
    console.log(`Before route update`);
  }
};
</script>

, он принимает события routeenter / left.Кажется, я могу перемещаться между маршрутами назад и вперед, но вы не увидите результат, пока страница не перезагрузится

Я не могу воссоздать проблему в jsfiddle, и я все пересмотрел и начал заново, но яполучить тот же результат.Я не вижу ничего, что я делаю неправильно, глядя на документацию Vue Router .Есть идеи, что мне здесь не хватает?

1 Ответ

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

В этом случае ответ был до боли прост.Был другой экземпляр Vue на странице в другом месте.Даже если я понимаю, что отдельные экземпляры Vue, связанные с различными элементами контейнера, должны существовать в гармонии, в данном случае это не так.Это было также то, что ломало инструменты разработчика Vue, показывая, например, экземпляр Vuex, но не показывая ни один из загруженных компонентов, и выдавало ошибку Cannot read property '__VUE_DEVTOOLS_UID__' of undefined в ошибках Vue Dev Tools.

...