记录vue-router跳转页面空白问题
vue- router里踩坑太多,全记录在这里,持续更新。
·
vue- router里踩坑太多,全记录在这里,持续更新
1.父组件中要配置路由出口 RouterView
<template>
<div class="main">
<router-view></router-view>
</div>
</template>
2.检查路由表配置
- 子路由路径 不要加 /
- routes配置项名称 不要写成 route
export default new Router({
routes: [ // 1.这里不要写成route,注意是复数!
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
path: '/hi',
component: Hi,
children: [
// 2.子路由路径 不要加 /
{path: '/hi2', component: Hi2}, // 错误写法
{path: 'hi3', component: Hi3}。// 正确写法
]
}
]
})
component配置项
- component配置项名称 不要写成 components
- 中间路由跳转重定向,也要配置
component
layout 这个路由跳转后重定向到 ‘/user/manage’,虽然这个路由被重定向,但是组件也要注册,否则它的子组件 userManage 无法挂载。
错误写法:
{
path: '/user',
name: 'user',
redirect: '/user/manage', // 此路由跳转后重定向到 '/user/manage'
children: [
{
path: '/user/manage',
name: 'userManage',
component: () => import('@/views/user-manage'),
}
}
正确写法:
{
path: '/user',
name: 'user',
component: () => import('@/views/layout'), // 虽然这个路由被重定向,但是不要忘记 注册组件
redirect: '/user/manage', // 此路由跳转后重定向到 '/user/manage'
children: [
{
path: '/user/manage',
name: 'userManage',
component: () => import('@/views/user-manage'),
}
}
3. 使用 transition组件后页面空白
确保路由组件中只有一个根节点
虽然 Vue3的 template 中可以使用多个根节点,但是<transition>
中的组件渲染无法设置动画的非元素根节点,换句话,<transition>
中的组件中只能有一个根节点。
多个根节点会导致 过渡无法生效,组件无法切换就出现了空白页。
<template>
<div>A1</div>
<div>A1</div>
</template>
<template>
<div>
<div>A1</div>
<div>A1</div>
</div>
</template>
注意:注释标签也是节点,例如以下属于多个根节点
<template>
<!-- 注释 -->
<div>
<div>A2</div>
<div>A2</div>
</div>
</template>
component组件添加key值
于Vue机制的原因,为了性能会使用同一个元素。也就是说你切换时并不会更换掉整个元素,而是替换掉该元素中的内容的值,以此来切换,所以在这里需要添加key。
为了保证key的唯一性,可以使用route的path来作为key。
<router-view v-slot="{ Component,route }">
<transition name="fade" mode="out-in">
<component :is="Component" :key="route.path"/>
</transition>
</router-view>
添加动态路由后页面空白
使用 addRoutes 动态添加路由跳转后页面刷新空白
原因:(动态)异步路由添加,执行addRoutes是需要时间的,刚刚addRoutes()就执行next()立刻访问被添加的路由,然而此时addRoutes()没有执行结束,因而找不到刚刚被添加的路由导致白屏。
解决方法:使用 next({…to}),从新访问一次路由 (结束当前导航,执行新的导航,再次执行beforeEach回调,直到 {…to}路径找到为止,才执行next()
// 全局 前置守卫
router.beforeEach(async(to, from, next) => {
document.title = getPageTitle(to.meta.title)
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
next({ path: '/' })
} else {
const hasGetUserInfo = store.getters.name
if (hasGetUserInfo) {
next()
} else {
try {
await store.dispatch('user/getInfo')
// next(path) 中断当前导航,执行新的导航
// 如果 addRoutes 并未完成,路由守卫会一层一层的执行,直到 addRoutes 完成,找到对应的路由才会放行
next({ ...to, replace: true }) // 正确写法
// next() // 错误写法
} catch (error) {
await store.dispatch('user/resetToken')
Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
...
})
其他
如果以上操作排查不出原因,可能是组件自身无法渲染,与路由切换无关,不要注册路由组件,直接开一个页面渲染该组件,再排查原因
更多推荐
所有评论(0)