位置: IT常识 - 正文

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

编辑:rootadmin
记录vue-router跳转页面空白问题

推荐整理分享记录vue-router跳转页面空白问题(vue-router跳转),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue$router,vuerouter跳转原理,vue route跳转,vuerouter跳转原理,vue的router跳转,vuerouter跳转原理,vue的router跳转,vuerouter跳转原理,内容如对您有帮助,希望把文章链接给更多的朋友!

vue- router里踩坑太多,全记录在这里,持续更新

1.父组件中要配置路由出口 RouterView<template> <div class="main"> <router-view></router-view> </div></template>2.检查路由表配置子路由路径 不要加 /routes配置项名称 不要写成 routeexport 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'), } }记录vue-router跳转页面空白问题(vue-router跳转)

正确写法:

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

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

本文链接地址:https://www.jiuchutong.com/zhishi/285092.html 转载请保留说明!

上一篇:【NLP相关】AI绘画api集合(nlp图)

下一篇:西孟加拉邦的双角犀鸟,印度 (© Debapratim Saha/Minden Pictures)(什么是西孟加拉邦首府)

  • 新手怎样快速有效地推广自己的QQ群(新手司机如何快速上手)

    新手怎样快速有效地推广自己的QQ群(新手司机如何快速上手)

  • 苹果怎么设置闹钟铃声自定义(苹果怎么设置闹钟每天叫醒)

    苹果怎么设置闹钟铃声自定义(苹果怎么设置闹钟每天叫醒)

  • 微信头像换了对方怎么还显示原来的(微信头像换了对方多久显示)

    微信头像换了对方怎么还显示原来的(微信头像换了对方多久显示)

  • 华为5g手机是否支持4g卡(华为5g手机是否上市)

    华为5g手机是否支持4g卡(华为5g手机是否上市)

  • oppo a9是有呼吸灯的吗(oppo a9手机有没有呼吸灯)

    oppo a9是有呼吸灯的吗(oppo a9手机有没有呼吸灯)

  • 小米手机怎样取消紧急联系人(小米手机怎样取卡出来)

    小米手机怎样取消紧急联系人(小米手机怎样取卡出来)

  • 魅族换机助手闪退(关于魅族换机助手使用过程中遇到的问题)

    魅族换机助手闪退(关于魅族换机助手使用过程中遇到的问题)

  • 戴尔g3 3590键盘灯打不开(戴尔g3 3590键盘灯常亮)

    戴尔g3 3590键盘灯打不开(戴尔g3 3590键盘灯常亮)

  • 安卓为什么越用越卡顿(安卓为什么越用越卡顿 知乎)

    安卓为什么越用越卡顿(安卓为什么越用越卡顿 知乎)

  • mate30pro快充多少w(华为mate30pro快充多少钱)

    mate30pro快充多少w(华为mate30pro快充多少钱)

  • gtj是什么文件(gtj文件怎么打开)

    gtj是什么文件(gtj文件怎么打开)

  • 酷狗音乐包和豪华vip有什么区别(酷狗音乐包和豪华vip音乐过期不能放了是什么回事)

    酷狗音乐包和豪华vip有什么区别(酷狗音乐包和豪华vip音乐过期不能放了是什么回事)

  • 哔哩哔哩怎么升级lv1(哔哩哔哩怎么升级lv2)

    哔哩哔哩怎么升级lv1(哔哩哔哩怎么升级lv2)

  • 电脑的平板模式是什么意思(电脑的平板模式怎么开启)

    电脑的平板模式是什么意思(电脑的平板模式怎么开启)

  • 9800gt相当于什么显卡(9800gt相当于什么n卡)

    9800gt相当于什么显卡(9800gt相当于什么n卡)

  • 怎样打印红色底子的照片(word怎么打印红色底面)

    怎样打印红色底子的照片(word怎么打印红色底面)

  • 微信自助解封人脸识别失败怎么办(微信自助解封人工客服)

    微信自助解封人脸识别失败怎么办(微信自助解封人工客服)

  • realmex2pro怎么双开微信(realme 双屏)

    realmex2pro怎么双开微信(realme 双屏)

  • 华为mate30是双扬声器吗(华为mate30支持双扬声器吗?)

    华为mate30是双扬声器吗(华为mate30支持双扬声器吗?)

  • 闲鱼被禁言怎么办么和买家联系(闲鱼被禁言怎么办)

    闲鱼被禁言怎么办么和买家联系(闲鱼被禁言怎么办)

  • 苹果实况照片是什么意思(苹果实况照片是自己拍的吗)

    苹果实况照片是什么意思(苹果实况照片是自己拍的吗)

  • 双卡双待怎么开两微信(双卡双待怎么开通第二个微信)

    双卡双待怎么开两微信(双卡双待怎么开通第二个微信)

  • 浏览器播放视频卡顿、黑屏(浏览器播放视频加速怎么设置)

    浏览器播放视频卡顿、黑屏(浏览器播放视频加速怎么设置)

  • 已认证进项税额转出怎么做账务处理
  • 不能从销项税额中抵扣的进项税额都有什么
  • 什么是税法要素
  • 税控盘扣税缴税分录怎么写
  • 债务承担规定是什么意思
  • 个税退还会计分录
  • 服务费可以计入办公费吗
  • 税金计提多了,交少了怎么处理
  • 报表没有其他收入怎么办
  • 税负率是含税还是不含税
  • 商贸企业购进商品怎么做成本
  • 退回产品怎么做分录
  • 找不到契税发票怎么办
  • 收到别人的承兑怎么入账
  • 国税变更办税人怎么变更
  • 红字发票信息表可以撤销吗
  • 2018营改增房产税计税依据
  • 关于两套账老板和会计须知的4个点
  • 一般纳税人是什么等级
  • 技术开发加计扣除
  • 其他劳务包括什么内容?
  • 年终奖需要计入工资交社保吗
  • 公司注销后银行账户怎么注销
  • 企业风险报酬转移怎么理解
  • 主营业务收入需要交增值税吗
  • 运输途中发生货物丢失
  • 职工福利费计提标准是多少
  • 有限合伙企业需要法人吗
  • 无法设置面容id怎么办
  • 人工费没有发票年度汇算调增需要进行调帐处理吗
  • 个体户升一般纳税人分红怎么交税
  • linux命令“ln file1 file2”的含义是
  • vue父组件调用子组件的方法报错
  • React developer tools调试工具全网最新最全安装教程
  • 广告费用属于损失吗
  • 企业所得税汇算清缴扣除标准2023
  • 行政事业单位会计职责
  • 外购产品视同自产产品办理免抵退税的条件有哪几种
  • 境外租赁要交什么税
  • 杭州西湖古风
  • 小规模未开票收入如何申报增值税
  • 精读论文分析
  • 固定资产无形资产计提折旧是当月还是次月
  • 已交土地使用金的划拨商品房与商品房的的区别
  • centos7.0安装
  • php网站根目录
  • 简易征收预缴税款
  • 差旅费 包括
  • sqlserver2008安装步骤图文
  • 贷款利息收入要交增值税吗
  • 购买的车位是否要交税
  • 办公室用茶叶怎么入账
  • 缴纳房产税和城镇房产税
  • 劳务派遣差额征税账务处理
  • 公允价值变动损益借贷方向
  • 非房产企业出售土地,能否计算抵减地价款
  • 建安发票是增值税发票吗
  • 债务转实收资本的审批报告
  • 删除sql server2019
  • sqlserver数据库迁移至mysql
  • windows优化软件哪个好
  • Windows Server 2008提升AD管理效率
  • mac系统怎么样
  • Remoterm.exe - Remoterm是什么进程 有什么用
  • 禅道界面
  • centos配置yum
  • win10各个版本的桌面
  • javascript definitive guide
  • python利用matplotlib将扇形平分成50份
  • 服务器防arp欺骗怎么解决
  • fullpage.js教程
  • 三个文件怎么汇总到一个里
  • 统计一组数据各个数字出现的次数
  • node.js golang
  • Unity3D游戏开发培训课程大纲
  • jq form提交
  • jquery控制display属性
  • python flask框架 web服务器
  • 2022年最新最全执业药师继续教育考试答案
  • 商铺转让要交哪些税费和费用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设