vue中的路由自己跳转自己可以吗

最新推荐文章于 2023-08-18 12:07:38 发布
最新推荐文章于 2023-08-18 12:07:38 发布
阅读量981 收藏 1
点赞数
分类专栏： 路由 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48975022/article/details/130067405
版权

在 Vue 路由中，自己跳转自己是允许的，但不建议这样做，因为会导致无限循环的路由跳转，从而导致页面卡死或崩溃。

如果要实现类似于点击一个按钮或链接后重新加载当前页面的效果，可以使用 router.go(0) 或 router.push(router.currentRoute) 来刷新当前页面。

router.go(0) 方法会强制刷新当前页面，而 router.push(router.currentRoute) 会把当前路由加入到路由栈中并执行一次路由跳转，达到重新加载页面的目的。

需要注意的是，为了避免无限循环跳转问题，这种方法应该谨慎使用，并且在使用前最好添加一些条件判断，如判断是否已经处于当前路由等，以确保不会出现无限循环跳转的情况。

一个被代码耽误的厨子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE 自身页面跳转自身页面
qq_41629522的博客
08-14 3581
先说一下要实现的功能： 点击原案件，要回到原案件，但是原案件页面和现在的页面一样，也就是自身跳转自身页面，路由地址不变。 使用vue祖传的push()方法来挑转的话，你会发现可以跳转过去，但是页面会刷新。不会触发vue生命周期函数 方法一： this.$router.replace({ path: '/case-detail', query: { caseId: this.detailInfo.parentId } }) this.caseFan() //添加页面初始化获取数据的方法
vue路由自己跳转自己生命周期不触发
举案齐眉意难平
07-25 837
因为vue有缓存机制，这个缓存机制和keep-alive没有关联，当router跳转时，如果你跳转的新路由地址和旧的地址是相同的path或者name。他不是没有跳转，跳了，但是也仅仅是跳了。今天接到了一个简单的需求（可以不看，这段没用），要求在导航栏加上菜单切换之后可以重新渲染左侧树，左侧的树要再次触发跳转。也可能这是一个没有办法处理的问题，因为不论是监听还是如何都是不能完美的解决这个需求。亲测无效都是相当于整体刷新页面，这种完全是js的处理方式也解决不了咱们的问题，页面整体刷新同上也不是我们想要的效果。
vue路由跳转方式
weixin_44402343的博客
05-10 796
原文链接 一、vue路由跳转方式以及传参方式 1、route-link // router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 // 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> // 带参数 <router-link :to="{name:'home', params: {'参数名': ’参数值‘}}"> &l
vue路由跳转自己时报错
weixin_49074984的博客
08-20 1569
在router.js中加上 import VueRouter from 'vue-router' const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }
vue路由跳转
小糖穿越火线
05-28 566
vue路由跳转 声明式：<router-link :to="..."> 编程式：router.push(...) 1、<router-link> <router-link to='/home'> <router-link :to="{name:'home'}"> // 传参 <router-link :to="{ name:'home...
vue页面跳转的方式（自己记录）
zzzyqsama的博客
08-03 746
1.router-link跳转 //不带参数 <router-link to = '/index'> <button>go</button> </router-link> //带参数 <router-link to = "{path: 'index',query:{id:123456}"> <button>go</button> </router-link> <router-link to = "{pa
vue相同路由跳转强制刷新该路由组件操作
10-14
在触发路由跳转的方法中，可以这样做： ```javascript this.$router.push({ path: "/xxx", query: { t: Date.now(), }, }); ``` 这将导致路由发生变化，但由于Vue Router仅比较路径和参数，而不考虑查询，...
Vue.js中该如何自己维护路由跳转记录
10-16
在Vue.js开发中，维护路由跳转记录是非常重要的，特别是在处理用户导航历史和回退操作时。...通过阅读和实践提供的代码示例，开发者可以更好地理解和掌握如何在Vue.js项目中实现自己的路由跳转记录管理。
解决vue单页路由跳转后scrollTop的问题
10-18
本文将详细介绍如何解决Vue单页路由跳转后scrollTop的问题。 首先，这个问题通常是由于浏览器的默认行为导致的。当你通过Vue Router进行路由跳转时，浏览器会记住之前页面的滚动位置。为了解决这个问题，我们可以...
vue 实现路由跳转时更改页面title
10-16
今天小编就为大家分享一篇vue 实现路由跳转时更改页面title，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【VUE学习笔记】vue-router编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出 NavigationDuplicated 的警告错误?
DayHeart的博客
04-01 922
注意:编程式导航（push|replace）才会有这种情况的异常，声明式导航是没有这种问题，因为声明式导航内部(vue-router)已经解决这种问题。 这种异常，对于程序运行是没有任何影响的。 但是看着非常烦 为什么会出现这种现象: 由于 vue-router 最新版本 3.5.2，引入了 promise，当传递参数多次且重复，会抛出异常，因此出现上面现象, function push(){ return new Promise((resolve,reject)=>{})} 第一种解决方案(仅解
vue如何在当前页面跳转到当前页面
weixin_53635194的博客
08-16 549
先建一个空页面， 先跳到空页面， 然后再从空页面跳转回来 使用history.go(-1)，但是可能会出现白屏闪一下的问题；location.href = '/home' 也是直接刷新，页面会白一下；在我看来这事非常好用的一个方法了，不会出现啥页面上的问题。在这里各位需要注意一定要把this.reload()放在方法里；在app.vue页面配置。
利用vue-router跳转的几种方式
piglite的专栏
08-18 2533
跳转到指定路径，并将跳转页面压入history栈中，也就是添加了一个页面记录。跳转到指定路径，将history栈中的当前页面替换为跳转到的页面。在histroy栈中向前或者向后跳转n个页面，n可为正整数或负整数。
vue重新进页面重新加载mounted或者created中的内容
m0_61177996的博客
03-13 3053
vue重新进页面重新加载mounted或者created中的内容
Vue--Router--解决多路由复用同一组件页面不刷新问题
IT利刃出鞘的博客
08-24 9189
本文介绍如何解决Vue的多路由复用同一组件页面不刷新问题。
vue中路由跳转的几种方式
热门推荐
Ruiqi8的博客
12-09 1万+
【代码】vue中路由跳转的几种方式。
vue中在当前页面跳转当前页面，解决页面初始化数据的问题
weixin_70437515的博客
06-22 3389
在博客代码编写过程中，遇到了曾今遇到过的问题：如果路由加载的页面是同一个页面，如何解决页面的初始化数据不变更问题。比如这两个路由指向同一个文件，当点击切换路由的时候，里面的数据没有发生变化。 你说使用路由守卫，在进来的时候，添加 beforeRouteUpdate()，在里面进行后台请求获取数据然后渲染到页面。官方说法是: 我从 xxx/original 到 xxx/recommend 不属于动态参数变化，所以这个方法根本不会进入。事实证明确实如此。 无效跳转无奈之下，只好继续思考，还有其他解决
vue router 的路由传参 params 和 query 的 区别
weixin_30588675的博客
09-05 2071
1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 &...
vue3中 路由跳转
最新发布
09-29
在Vue3中，可以通过`vue-router`来进行路由跳转。在你提供的代码中，可以使用`useRouter`和`router.push`方法来实现路由跳转。首先，你需要导入`useRouter`方法，然后在setup函数中使用该方法来获取`router`实例。接下来，你可以定义一个点击事件处理函数，当点击某个元素时，调用`router.push`方法并传入对应的路径。这样就可以实现页面的跳转了。 例如，在你提供的代码中，使用`gnClick`方法来实现路由跳转。在点击事件中，传入了对应的路径作为参数，并调用`router.push`方法来实现页面跳转。具体的代码如下： ```javascript import { useRouter } from "vue-router"; setup() { const listData = [ { id: 1, name: "需求中心", path: "" }, { id: 2, name: "成果中心", path: "/AchieveMents" }, { id: 3, name: "互助交流", path: "" }, { id: 4, name: "专利中心", path: "/patented" }, { id: 5, name: "专家资源库" }, { id: 6, name: "新闻中心", path: "/newsCenter" }, { id: 7, name: "中心介绍", path: "" }, ]; const router = useRouter(); function gnClick(item) { router.push({ path: item.path }); } return { listData, useRouter, gnClick }; }, ``` 所以，在Vue3中，你可以通过引入`useRouter`方法和`router.push`方法来实现路由跳转。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值