位置: 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)(什么是西孟加拉邦首府)

  • 教你玩转微博,怎样撰写微博软文 (微博这么玩)

    教你玩转微博,怎样撰写微博软文 (微博这么玩)

  • 华为p50如何复制门禁卡(华为p50如何复制文字)

    华为p50如何复制门禁卡(华为p50如何复制文字)

  • macbook显示文件后缀(macbook显示文件夹问号)

    macbook显示文件后缀(macbook显示文件夹问号)

  • 华为手机录屏怎么弄(华为手机录屏怎么没有声音)

    华为手机录屏怎么弄(华为手机录屏怎么没有声音)

  • 微信mull什么意思(微信nmm是什么意思)

    微信mull什么意思(微信nmm是什么意思)

  • 淘宝追加评价有时间限制吗(淘宝追加评价有效期多久)

    淘宝追加评价有时间限制吗(淘宝追加评价有效期多久)

  • 浙江华为和华为一样吗(浙江华为和华为的待遇对比)

    浙江华为和华为一样吗(浙江华为和华为的待遇对比)

  • oppoa91微信视频怎么没有美颜(oppoa91微信视频可以美颜吗)

    oppoa91微信视频怎么没有美颜(oppoa91微信视频可以美颜吗)

  • wps日期怎么自动填写(wps日期怎么自动填充不变)

    wps日期怎么自动填写(wps日期怎么自动填充不变)

  • 深夜模式在哪里设置(深夜模式在哪里设置苹果)

    深夜模式在哪里设置(深夜模式在哪里设置苹果)

  • 荣耀v30和v30pro区别(荣耀v30和v30 pro哪个性价比高)

    荣耀v30和v30pro区别(荣耀v30和v30 pro哪个性价比高)

  • 短信隐藏提醒什么意思(短信隐藏提醒后还能收到信息吗)

    短信隐藏提醒什么意思(短信隐藏提醒后还能收到信息吗)

  • ipadair10.5寸是几代(ipad air10.5英寸是几代)

    ipadair10.5寸是几代(ipad air10.5英寸是几代)

  • 苹果手机关闭自动更新为什么还会自动下载(苹果手机关闭自动续费怎么关闭)

    苹果手机关闭自动更新为什么还会自动下载(苹果手机关闭自动续费怎么关闭)

  • 添加蜂窝号码什么意思(增加蜂窝号码)

    添加蜂窝号码什么意思(增加蜂窝号码)

  • iphonex没有面容有影响吗(iphonex没有面容解锁是什么原因)

    iphonex没有面容有影响吗(iphonex没有面容解锁是什么原因)

  • 手机软件怎么读xps文件(app怎能读)

    手机软件怎么读xps文件(app怎能读)

  • iphonexsmax电量怎么显示(iphonexsmax手机电量百分比)

    iphonexsmax电量怎么显示(iphonexsmax手机电量百分比)

  • word2003页面设置在哪(word2003页面设置横向纵向)

    word2003页面设置在哪(word2003页面设置横向纵向)

  • 拼多多扫一扫在哪里(拼多多扫一扫在哪里图片)

    拼多多扫一扫在哪里(拼多多扫一扫在哪里图片)

  • 抖音显示非堂是在哪里(抖音显示非堂是什么意思)

    抖音显示非堂是在哪里(抖音显示非堂是什么意思)

  • 什么是微博营销(什么是微博营销?微博营销涉及的范围包括哪些?)

    什么是微博营销(什么是微博营销?微博营销涉及的范围包括哪些?)

  • 相机360的马赛克在哪里(相机马赛克软件下载)

    相机360的马赛克在哪里(相机马赛克软件下载)

  • 华为畅享9plus返回键在哪里设置(华为畅享9plus返厂维修订单多久付款)

    华为畅享9plus返回键在哪里设置(华为畅享9plus返厂维修订单多久付款)

  • 华为手机遮挡顶部功能怎么取消(华为手机遮挡顶部黑屏怎么关闭)

    华为手机遮挡顶部功能怎么取消(华为手机遮挡顶部黑屏怎么关闭)

  • 手机盾是什么意思(手机盾是什么意思 中国农业银行)

    手机盾是什么意思(手机盾是什么意思 中国农业银行)

  • SpringMVC(springmvc的执行流程)

    SpringMVC(springmvc的执行流程)

  • c语言中typedef关键字是什么(c语言中的typedef struct)

    c语言中typedef关键字是什么(c语言中的typedef struct)

  • 公司取得违约金合法吗
  • 发票低于实际支付的金额如何做账
  • 公司买茶具计入什么费用
  • 城市维护建设税怎么做分录
  • 应付利润的核算内容
  • 有限责任公司(自然人投资或控股)
  • 资本公积金转增股本所获取的收益属于
  • 计提房屋折旧会计分录
  • 出口退税备案完后怎么办
  • 销售包装物的会计处理
  • 发生的成本作为存货处理
  • 月末结转所有收入类账户
  • 预付办公室装修款
  • 私人房产无偿赠个人所得税需要缴纳吗?
  • 如何异地缴纳个人医保
  • 房地产教育培训
  • 营改增之前
  • 小微企业开发票优惠政策
  • 选择纳税人身份考虑的因素
  • 资金流量表的解读
  • 营业执照号码含义
  • 租赁产生的成本有哪些
  • 企业收到损坏赔偿金
  • 事业单位固定资产处置流程
  • 保险付款后几天给发票保单
  • 以前月份个税没交怎么办
  • 注册会计师考试成绩查询2023
  • 企业出售自用汽车
  • linux minor
  • 企业重组后的债务怎么算
  • 电脑qq音乐设置在哪里
  • 中专学历可以报成人本科吗
  • 生产企业委外加工比例出口免抵退税
  • 财政应返还额度年末有余额吗?
  • 增值税征税范围中的货物包括
  • 记账凭证不见了怎么办
  • pyecharts绘制柱状图动态图
  • 冰雪节上的冰雕图片
  • php中实现文件上传需要用到哪几个函数
  • mysql表中数据
  • php中文字符串截取
  • 间接费用计算
  • 购房发票可以对折吗
  • 自产产品用于福利账务处理
  • python从键盘输入正整数n,计算1+2+3
  • 出售汽车固定资产要交什么税
  • 保险中介手续费规定最新
  • 收取水电费计入什么科目
  • 质量赔偿可以开什么费用发票
  • 劳务报酬需要申报个税吗
  • 核销单取消后出口收汇流程
  • 冲回上月暂估入账的商品会计分录
  • 公司把钱打到银行了,银行未打到我工资卡
  • 营改增后如何纳税
  • 销售做不动 应该做什么
  • 什么时候确认应收
  • MySQL:Unsafe statement written to the binary log using statement format since BINLOG_FORMAT = STATEM
  • mysql中的null值和空
  • winxp系统如何安装
  • linux中samba服务器的设计方案
  • bios怎么设置efi引导
  • 运维zabbix
  • windowsxp桌面没有我的电脑
  • win7不能运行应用程序的方法
  • 怎么清空windows8电脑里全部东西
  • lowleverfatal error怎么解决
  • win7纯净版系统安装教程
  • win7系统软件卸载
  • win10 系统软件
  • 如何关闭win8自带杀毒
  • cocos lua js
  • 程序员应该学什么
  • css不需要编译
  • css文本框怎么对齐
  • onInterceptTouchEvent onTouchEvent 的坑 坑死了
  • python tornado django
  • 广州买房退税政策2020
  • ca证书免费申请
  • 小规模纳税人在电子税务局怎么报税
  • 宜昌市西陵区国税局局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设