Vue Router路由切换时无法渲染新组件的问题求助

嘿，我帮你揪出问题啦！问题出在router.js里的路由重定向配置写法错误，导致路由切换时组件无法正常渲染。

问题根源 #

Vue Router的redirect配置必须放在routes数组的单个路由对象中，而不是和routes平级作为Router构造器的顶层选项。你现在把redirect: { "/": "page1" }写在了routes外面，这种写法不符合Vue Router的规范，会让Router无法正确处理路由切换后的组件更新逻辑——虽然钩子事件能触发，但<router-view>的渲染更新流程被打断了，所以只有刷新页面才能看到新组件。

修正后的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: [
 // 将重定向配置移到routes数组内的独立路由对象中
 { path: '/', redirect: '/page1' },
 { path: '/page1', name: 'page1', component: Page1 },
 { path: '/page2', name: 'page2', component: Page2 },
 { path: '*', component: ErrorPage }
 ]
})

原理说明 #

把根路径的重定向写在routes数组里后，Vue Router能正确维护路由状态的变化，当你点击<router-link>切换路由时，Router会触发完整的路由更新流程，包括卸载旧组件、渲染新组件，而不再只触发钩子却不更新视图。

你可以试试这个修改，路由切换后组件应该就能正常渲染啦！

内容的提问来源于stack exchange，提问作者nathanchere