首页 > 其他分享 >使用router跳转页面出现空白页

使用router跳转页面出现空白页

时间:2022-11-14 20:33:43浏览次数:51  
标签:空白页 跳转 组件 router 出现 页面

一、问题

使用router进行页面跳转,路径已经跳转但是出现了空白页,并且显示以下提示

 

 同时在空白页刷新之后能够出现

二、解决办法

1、出现问题的原因

<transition>中的组件渲染无法设置动画的非元素根节点。

2、将<transition>中的内容使用<div>包裹起来

<template>
  <div> 
     组件
 </div>
</template>

也可以将<transition>去掉

将包含路由的组件使用div包裹起来之后点击跳转页面就没有出现白屏现象

问题解决!

标签:空白页,跳转,组件,router,出现,页面
From: https://www.cnblogs.com/shlbetter/p/16879744.html

相关文章

  • this.$router和this.$route区别
    this.$router是vueRouter实例,包含了路由跳转方法和一些钩子函数  $router对象是全局路由的实例,是router构造方法的实例路由实例方法:push():push方法的跳转会......
  • uniapp跳转传参
    varmynavData=JSON.stringify(that.navData);//这里转换成字符串uni.navigateTo({url:'./nav?index='+mynavData......
  • nginx中的location匹配与rewrite重写跳转
    nginx正则表达式^:匹配输入字符串的起始位置$:匹配输入字符串的结束位置*:匹配前面的字符零次或多次。如“ol*”能匹配“o”及“ol”、“oll”+:匹配前面的字符一次或......
  • 升级到React-Router-v6
    前言近期完成了公司新项目的开发,相关的技术栈都用到了最新版本,reactrouter也使用了v6的版本,所以借这个机会自己再梳理下reactrouterv5与v6的区别,以及v6一些新......
  • 47.vue-router的钩子函数
    钩子函数就是路由导航守卫;有7个守卫,分为3类;全局守卫:在全部的组件生效;beforeEach全局前置守卫afterEach全局后置守卫 解析守卫......
  • 46.使用过vuex和vue-router吗
    使用过,vuex是状态管理工具,它的数据可以被所有的组件获取,方法可以被所有的组件调用;vuex 的内部的运行机制:state提供了数据驱动视图,dispath派发actions执行异步操作,comm......
  • react-router-dom v6+antd+react18配置
    官网地址:react-router1.安装的版本,antd版本4.24.12.项目目录结构3.入口文件index.js配置,react18版本发生了一些变化,改为以下写法importReactfrom'react';import......
  • JS登录跳转加表单的增删改查
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="js/jquery-3.3.1.min.js"></script></head><body>......
  • beego下swagger自动更新接口信息和commentsRouter_controllers.go
    (1)在beego环境中,当更新了controllers目录下面的接口后,在swagger的web页面虽然可以看到更新后的接口,但无法正常运行,这是因为swagger的路由信息还没有更新(2)要更新swagger的路......
  • 22. uni-app 怎么跳转界面
    methods:{//gonavigate()为点击响应事件,可在HTML部分设置@tap="gonavigate()"gonavigate(){uni.navigateTo({//保留当前页面,跳转到应......