vue跳转同一路由页面不跳转

最新推荐文章于 2024-07-11 17:17:41 发布
最新推荐文章于 2024-07-11 17:17:41 发布
阅读量2k 收藏 2
点赞数
分类专栏： 前端 文章标签： vue vue-router 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51299408/article/details/123712490
版权

问题:

路由跳转了， 但是页面数据没有改变， 必须要刷新一下才可以改变

分析:

虽然地址改变了，但是页面只会创建一次，不会再次去发送请求,setup只会执行一次，导致页面不会刷新

解决:

只需要给<RouterView / >增加唯一的key就ok

 

weixin_51299408
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 同一个页面路由无反应_Vue同一路由跳转页面不刷新解决方案及注意事项
weixin_28796657的博客
02-11 5498
默认情况跳转至同一个路由地址(path相同，即使params或者query不同也算同一个)的话，只是浏览器url变了，其它是不会发生任何变化，这就是网友常说的“同一页面跳转，路由变了但是页面不刷新”。我们可以写两个测试页面// goNext.vue跳转至自身跳转至goBackexport default {name: 'goNext',mounted() {console.log('组件生命周期 ...
vue路由跳转后页面未置顶显示
syx_cainiao的博客
12-23 354
在登录页面输入用户名和密码之后跳转到主页面，浏览器可视区域上部显示的不是主页面的header部分，后来发现无论从哪一页面跳转到主页面，显示的都不是页面的header。 此时解决问题的思路就很明了了 就问题而言，在路由跳转时或者后，把页面定位设置成 x: 0, y: 0 第一种想法： 在路由的全局导航守卫router.beforeEach添加 window.scrollTo(0,0) 但是没好用，我得在路由元中meta添加一个title属性，然后用 document.title=to.meta.title修
vue系列之---- 跳转同一路由,页面不可刷新不可跳转问题解决方案
hyduan_h5的博客
09-03 5279
在项目中经常有这样的需求，同一页面路由根据不同参数，渲染不同数据、不同效果、甚至重新刷新整个页面。但由于路由的强缓存原因，同一路由跳转往往不会进行刷新，故而总结了几种解决办法。 方法1： 实现原理： 点击当前菜单，先跳转过渡空白页面，再跳转原页面； 实现优点 简单方便快速统一 实现缺点 所有页面都将进行刷新，且因跳转其他页面故反应时间较长 实现代码 新建empty.vue <template></template> <script> export d.
vue-router同路由$router.push不跳转一个简单解决方案
shykevin的博客
04-19 7150
一、概述 vue-router跳转一般是这么写： toCurrentPage: function(thisId){ this.$router.push({path:'/test ', query: { id: thisId, option: ""}}); } 但是当遇到，需要跳转同页面不同query的情况，上面的方法不起作用。当然了，从性能来说，理论上这种情况最佳的解决...
vue配置路由，路由不跳转，页面不显示
热门推荐
qq_41988113的博客
04-26 1万+
问题1：路由不跳转 遇到这个问题第一时间去检查自己的代码 （1）在router index.js中 ①查看这两个routes是否一致 const routes:[ ... ] const router = new VueRouter({ routes, }) ②配置中的component是否多加了s { path: '/home', component: Home }, ③导入的文件路径是否正确 const Home = () => import('../vi
Vue中路由跳转地址如果和当前页面路由一样，就会报这样的错：Error: Avoided redundant navigation to current location
m0_46693606的博客
02-09 252
路由跳转地址如果和当前页面路由一样，就会报这样的错： // 在router.js中， // 如果项目中跳转方式是push，就用： import VueRouter from "vue-router"; const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err
如何解决vue的this.$router.push()在同一页面无法跳转问题
qq_45632139的博客
05-20 1万+
在做项目的检索功能时碰到这样一个问题，首先所有的页面都包含了这个headers， headers写了搜索框以及按钮,点击搜索之后要跳转到检索的页面，但是当你正好处在检索页面的时候点击检索之后参数居然不发生变化，一查，结果是this.$router.push()无法再一个页面做跳转 解决方法： 这里的解决方法比较粗暴 我使用window.localtion.href = ‘路由’+’?参数’ 就可以直接跳转了 ...
vue 没登录跳转不到其他页面
☆夏の独憶☆
02-14 459
router.beforeEach((to, from, next) => { // to 将要访问的路径 // from 代表从那个路径跳转而来 // next 代表是一个函数 表示放行 if (to.path === '/login') return next(); const tokenStr = window.sessionStorage.getItem('token') if (!tokenStr) return next('/login');
vue 跳转 同一路由不刷新问题解决(相同path不同query)
01-08
 遇到个需求，要求在同一个path下，通过不同的query实现跳转不同的页面，大概就是下面这个样子: 这样当全路径变化的时候，就会触发跳转了。 BerySteven_shen 原创文章 79获赞 39访问量 6万+ 关注
vue相同路由跳转强制刷新该路由组件操作
10-14
在Vue.js应用中，路由是...在进行路由跳转和组件刷新时，理解Vue Router的工作原理至关重要，这可以帮助我们编写出更加灵活且可维护的代码。同时，遵循最佳实践和避免常见错误，如路由命名冲突，也能提高应用的质量。
vue 实现路由跳转时更改页面title
10-16
今天小编就为大家分享一篇vue 实现路由跳转时更改页面title，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue页面跳转实现页面缓存操作
11-20
以下是对如何实现Vue页面跳转并进行缓存操作的详细解析： 1. **路由配置**： 在Vue Router的配置中，可以指定某些路由页面需要进行缓存。通过在路由元信息(`meta`)中添加`cache: true`标记，表明该页面需要被缓存...
[vue-router] history模式下路同无法跳转
qq893182474的博客
03-07 5461
本地dev运行和build-nginx运行，vant的样式异常 和 组件van-popup 包 van-cascader 的弹框显示不出内容！ 出现此问题的上一步是因为项目中配置的cdn无法访问，导致界面加载混乱，所以将cdn的引入屏蔽。但是本地开发时，屏蔽了就导致vue-router报错，点击按钮跳转子路由时无反应，报错如下： 第一次突破，发现如果把屏蔽的cdn打开，就能正常点击了。 问题，但是这是做的移动端网站，手机上加载图书入库时，要选库位（van-popup 包 van-cascader
Vue:在同一个页面中进行页面跳转（tab切换的）查询
li22356的博客
09-11 3464
需求： 最近老板给了我一个需求：就是在部门绩效tab里面有员工查询的条件，需要在部门绩效tab里面输入员工查询的条件跳转到员工绩效tab里面去查询。其中部门名称查询不需要跳转页面查询 我的问题误区： 我始终认为在同一个页面跳转用路由跳转方式就可以。但是我发现不太行。用了很多方法。也有可能我的方法没有用对。后来我问了我的同事，他和我说在同一个页面中（tab切换），我们只需要传tab切换的值就好了，不需要页面路由跳转。我当时一想进入了误区了，太纠结这个问题的原因实现了。 需求页面要求如下： 解决方案：
vue在当前页不跳转显示另一个页面_你了解vue的组件吗？有没有实现过一个组件？...
weixin_33308507的博客
01-26 1730
上次已经讲解过vue组件的实现过程，具体可以看这篇文章：http://blog.aizhifou.cn/articles/2020/04/26/1587882114011.html今天用vue来实现一个分页组件，总体来说，vue实现比较简单，样式部分模仿了elementUI。所有代码的源码可以在github上下载的到：https://github.com/jackzhujie/vue-study先...
vue通过router地址传参跳转同一路由页面，页面不刷新的解决办法
weixin_54122176的博客
03-14 4804
记录一下最近遇到的vue路由页面间的跳转的问题，其中就涉及到了不同路由的跳转（/a/b1 => /a/b2）、相同路由不同参数间的跳转（/a/b?c=2）、相同页面锚点跳转（/a/b#id1 =>/a/b#id2）解决：可以在不刷新的页面通过监听route,重新加载数据。原因：渲染的是同一组件。
Vue 路由的router 路由守卫 阻止路由跳转 让其跳到固定的位置
qq_60690665的博客
11-17 3085
Vue 路由的router 路由守卫 阻止路由跳转 让其跳到固定的位置
如何搭建互联网医院系统源码？医疗陪诊APP开发实战详解
最新发布
meihusdk的博客
07-11 226
希望本文能够为正在或即将从事相关开发的技术人员提供一些参考和帮助。通过不断的努力和创新，我们可以为患者提供更优质的医疗服务，推动医疗行业的数字化转型。
vue跳转同一路由页面不刷新
10-22
在Vue中，同一路由跳转不会重新执行生命周期，因此数据不会更新，无论是动态路由还是传参都不会刷新页面。这是因为路由的强缓存原因，同一路由跳转往往不会进行刷新。为了解决这个问题，可以采用两种方法：一是通过新建空白页面再返回原页面的方式实现刷新，二是通过在路由配置中添加meta标签，强制刷新页面。具体实现方法可以参考引用中提供的两种方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值