记录vue-router跳转页面空白问题

本文详细记录了Vue Router在实际使用中遇到的各种问题及解决方案,包括父组件配置RouterView、路由表正确配置、component命名错误、transition组件使用误区、动态路由添加后的白屏问题等。通过实例分析,帮助开发者避免和解决Vue Router的常见陷阱。
摘要由CSDN通过智能技术生成

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 {
    ...
})

其他

如果以上操作排查不出原因,可能是组件自身无法渲染,与路由切换无关,不要注册路由组件,直接开一个页面渲染该组件,再排查原因

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值