vue-router 不会在路由更改时渲染新组件

Posted 2023-02-22

【中文标题】vue-router 不会在路由更改时渲染新组件

【英文标题】：vue-router not rendering new components on route change

【发布时间】：2019-06-23 22:54:10

【问题描述】：

我有一个非常简单的带有 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），或者如果我在将 Vue 绑定到#app 之前显式地 route.push 它也显示了预期的组件。

导航到其他路线似乎无法完全正常工作，或者至少它没有呈现新路线。当我像这样将调试输出添加到页面组件时：

<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/leave 事件。我似乎可以在路线之间来回导航，但在页面重新加载之前你看不到结果

我无法在 jsfiddle 中重现问题，我已经废弃所有内容并重新开始，但得到了相同的结果。通过查看Vue Router documentation，我看不出我做错了什么。知道我在这里缺少什么吗？

【问题讨论】：

你在你的 vue-router 中使用了什么mode？根据您的链接示例-hash，但默认的是history。

另外....$mount('#app') - 你的html中的id='app'在哪里？找不到。

【参考方案1】：

在这种情况下，答案非常简单。页面上的其他地方还有另一个 Vue 实例。尽管我的理解是绑定到不同容器元素的单独 Vue 实例应该能够和谐地存在，但在这种情况下它不是。这也是破坏 Vue 开发工具的原因，例如显示 Vuex 实例但没有显示任何已加载的组件，并在 Vue 开发工具错误中给出 Cannot read property '__VUE_DEVTOOLS_UID__' of undefined 错误。