vue路由跳转本来正常,跳转到某一个页面再跳出其他页面,出现页面空白

最新推荐文章于 2023-11-24 16:51:47 发布
最新推荐文章于 2023-11-24 16:51:47 发布
阅读量3.1k 收藏 5
点赞数 4
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangyu_98/article/details/123416286
版权
在编写Vue3应用时，遇到一个奇怪的bug：从某个页面跳转后，页面出现空白，且无法返回。经过排查，发现在template外部的注释导致了两个根元素，虽然Vue3支持多根元素，但可能由于使用了transition标签而引发问题。移除注释后恢复正常。此外，还发现官方推荐的vue-router4写法在实际应用中出现了意料之外的情况。
摘要由CSDN通过智能技术生成

昨天在写代码的时候遇到一个很奇怪的问题,本来路由都是正常的,结果我跳转到某一个页面后再跳出结果就页面空白了,也不能再跳回原来的页面,刷新后页面又能够正常显示了,后面也筛选了路由的书写都没发现异常.

 

后面看到页面的时候发现我在template内的根元素外面有一个注释,删除之后就正常了,后面想到html也会吧注释的内容当成一个标签进行显示,这样的话我的template下面就有了两个根元素,但是vue3是已经支持多个根元素了, 这里的原因可能是因为我的路由出口使用 transition 标签进行包裹 , 可能是transition不支持多标签吧 

         >_< 具体原因 我是不太清楚了 ,烦请各位大佬在评论区多多指教啊 , >_<

调试中又发现了些其它问题 , 有点奇怪 , 下图中上面这种写法

上图红框中的写法是vue-router4官方推荐的写法 下面是官网截图

 

小鱼儿123123
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
10-18
在Vue 2.0版本中，开发者可能会遇到这样的问题：当用户尝试跳转到一个未在路由配置中定义的路径时，会出现一个空白页面，这是因为vue-router没有匹配到对应的路由，也没有任何默认页面可以展示给用户。 为了解决这...
切换路由时页面空白问题（vue3）
最新发布
qq_66953312的博客
07-30 670
页面空白不报错，刷新后显示正常
vue路由跳转闪回，点击跳转的a标签以后页面跳转成功后又闪回到原页面
weixin_44022713的博客
06-07 2220
vue初学时对概念的辩证思考
VUE 跳转至某一页面后 再跳转至其他页面出现空白 刷新后正常显示的问题解决
weixin_55296581的博客
01-31 2546
VUE 跳转至某一页面后 再跳转至其他页面出现空白
vue跳转页面之后返回_为什么用vue路由跳转到另一个页面后马上又回到原来的页面？...
weixin_29876341的博客
12-29 5384
我发现是在路由配置那里添加了一句 mode: 'history'注释掉就没这个问题了，但是前端用了这句代码，后台没有配置，页面不是应该报错404吗，为什么只是跳转到原先的页面Vue.use(Router)export default new Router({// mode: 'history',routes: [{path: '/',name: 'Login',component: Login}...
路由跳转到其他页面
weixin_39537054的博客
11-19 774
路由跳转到其他页面方法 比如前提 点击按钮， <button @click="jumpBtn()">跳转到首页</button> 跳转到home页面 而home的路由地址是这样的， { path: '/Home', name:'home', component: Home }, 1、根据path this.$router.p...
vue路由跳转白屏问题
weixin_43972213的博客
09-23 7086
当前问题： 比如当前路由为： `/projectDetail?Id=1&name=页面1` 通过页面改变了路由参数Id `/projectDetail?Id=2&name=页面1` 此时做的操作是： this.$router.push({ name: 'projectDetail', query: { Id: this.id, name: this.name } }) this.$router.go(0) 在这种情况下，会导致页面整体刷新，且出
vue从一个页面跳转到另一个页面并携带参数的解决方法
10-16
下面我们将详细讨论如何在Vue中从一个页面跳转到另一个页面并携带参数。 1. **使用`this.$router.push()`进行页面跳转** 要在Vue组件中实现页面跳转，可以使用`this.$router.push()`方法。这个方法接受一个对象，...
vue实现登录后页面跳转到之前页面
01-19
在开发中我们经常遇到这样的需求，需要用户直接点击一个链接进入到一个页面，用户点击后链接后会触发401拦截返回登录界面，登录后又跳转到链接的页面而不是首页，这种问题该如何去做呢？ 先说一下我们需要用到的几个...
vue中页面跳转拦截器的实现方法
08-29
Vue.js中页面跳转拦截器是一种控制用户访问权限的技术，通常用于在用户跳转到某个页面之前，判断用户是否具有访问该页面的权限。在单页面应用中，Vue Router是实现路由管理的重要工具，而拦截器则是保证应用安全性和...
vue路由拦截及页面跳转的设置方法
08-27
在上面的代码中，我们定义了一个路由规则， path 为 /selfcenter，name 为 selfcenter，并且配置了 meta 信息，requireAuth 为 true，表示进入该页面前需要判断是否需要登陆。 二、路由拦截 在 main.js 文件中，...
若依切换菜单路由跳转成功，没有调接口页面空白，刷新后正常
tt1234561009的博客
08-16 2542
前端项目若依版本号是 RuoYi-Vue-Plus v5.1.0，在开发过程中有时会出现切换菜单或者tab，页面空白的情况，刷新页面后又恢复正常了。多次复现出现这种情况一般是在页面停留了几分钟再操作，偶尔也会莫名奇妙的出现，具体什么原因还不明确。在网上找了些资料，看到部分开发者也遇到过这个问题，应该是框架本身的bug，可能是由于在AppMain中用了transition，组件内又使用了transition导致的。删除后就没有再遇到跳转空白的情况了，虽然没有路由过渡动画了，但是保证系统正常使用才是最重要的。
路由退回到之前的页面后数据不刷新
最是人间留不住，朱颜辞镜花辞树。
07-06 3392
有两个页面A和B，我们使用单页面的形式，使用vue-router来实现页面的“跳转”，当我们一开始打开A页面时，执行了页面的created和mounted，跳转到B页面，执行了B页面的created和mounted，但是，当我们从B页面“跳转”回A页面时，我们发现不会执行created和mounted了，因为这个Vue组件已经加载了，它不会重复执行方法，如果我们要在路由发生变化的时候执行方法，那我们就需要监听$route的变化，在它变化的时候执行方法。
vue项目 刷新页面时跳转到首页，如何解决
weixin_58794925的博客
07-24 1532
项目部署上去刷新页面时会跳转到首页 两种路由模式都会跳转，但是在本地是正常的，这到底是咋回事啊，各位大佬快帮看看。
vue怎么嵌套多级路由页面打不开_【Vue】嵌套路由
weixin_32190377的博客
01-12 788
嵌套路由之前用路由做了一个导航页面，这波在路由里面嵌套路由，在社区页面中再添加三个路由学术讨论、资源下载以及个人中心。嵌套的子路由同样需要通过 router.js 文件进行配置，配置方法为在父路由中设置 childrenchildren 数组中包含几个对象，则表示有几个子路由子路由的路径可以使用简写，即路径中不写 / ，在跳转路径时会向上查找，找到父路由路径并拼接。例如子路由路径为 path: '...
vue路由跳转页面问题
qq_29116547的博客
10-30 401
当页面很长滚动首页时，点击滚动位置所在页面， 跳转之后的子页面也会跟着到之前首页滚动到的位置，解决方法在routes下面再加一项 export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/...
vue3 碰见的坑！！！ 页面跳转回原页面不显示的问题
lei_jobs的博客
11-24 650
然后发现，当页面切换到else的内容的时候，跳出当前路由，跳向其他路由，页面就不显示。刚开始写的时候，因为VUE3说可以不用在最外层包裹根元素，所以就没有用div包裹。后来再外边包裹了一个根元素，就没有这种问题出现了。
vue 路由跳转点击按钮跳转到某一个页面
05-19
在 Vue 中使用 Vue Router 进行页面路由跳转，可以通过以下步骤实现： 1. 在 Vue 程序中安装 Vue Router ```bash npm install vue-router --save ``` 2. 在 Vue 程序中创建路由配置文件 `router.js` ```javascript import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] }) ``` 3. 在 Vue 组件中使用路由 ```html <template> <div> <button @click="gotoHome">Go to home</button> <button @click="gotoAbout">Go to about</button> </div> </template> <script> export default { methods: { gotoHome() { this.$router.push({ path: '/' }); }, gotoAbout() { this.$router.push({ path: '/about' }); } } } </script> ``` 在上面的示例代码中，我们在 Vue 组件中添加了两个按钮，分别用于跳转到首页和关于页面。当用户点击这些按钮时，Vue 组件会调用 `this.$router.push()` 方法进行路由跳转。`this.$router.push()` 方法接收一个路由配置对象，其中 `path` 属性表示需要跳转的页面路径。 注意，在使用 `$router.push()` 方法时，必须先在 Vue 组件中引入 Vue Router，并且要在 Vue Router 的配置文件中定义需要跳转的页面路由。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值