关于Vue路由当前页面数据不更新得解决问题

最新推荐文章于 2024-03-28 08:47:39 发布
原创 最新推荐文章于 2024-03-28 08:47:39 发布 · 475 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #html #javascript #vue.js #es6

本文介绍了如何在Vue路由中使用`this.$router.go(0)`来避免页面重复，针对路由冲突提供了一种简单有效的解决方案，适用于前端开发者解决常见问题。

话不多说，在你当前得路由页面下加上这段代码：

watch:{
    $route(to,from){
      this.$router.go(0)
    }
  },

造成这个的原因主要是路由的重叠，用 this.$router.go(0)返回上层页面即可

浏览器页面刷新，history增加，需要多次调用history.back()才能后退的解决方法
qq_34415621的博客
08-29 2974
浏览器页面刷新，history增加，需要多次调用history.back()才能后退的解决方法history.back()时需要调用好几次才能回退到上个页面。本来刷新应该不会增加history的记录，项目中某些页面就会出现这种情况，刷新一次就会增加一条。但是有些页面就没这种现象，具体原因也没有查到，希望懂的同学赐教。......
解决vue 路由变化页面数据不刷新的问题
08-27
总结，解决Vue路由变化时页面数据不刷新的问题，关键在于正确监听路由变化并及时更新组件中的数据。这可以通过`watch`、`beforeRouteUpdate`或直接在`created`钩子中处理数据请求来实现。确保每次路由变化时，组件都...
Vue 路由 跳转【返回、刷新、跳转】
热门推荐
estrusKing的博客
03-23 1万+
Vue 路由 跳转【返回、刷新、跳转】this.$router.go(-1)this.$router.back()this.$router.pushthis.$router.replace this.$router.go(-1) 原页面表单中的内容会丢失； 向前或者向后跳转n个页面，n可为正整数或负整数 this.$router.go(-1)：后退+刷新 this.$router.go(0)：刷新； this.$router.go(1) ：前进 this.$router.back() 原页表表单中的内
vue中$router.back()和$router.go()
qq_43638735的博客
04-10 9171
返回上一页，有两种方法： 1. $router.back() 2. $router.go() 使用$router.back()和$router.go(-1)作用相同，都是返回原页面，但如果原页面路由携带参数，使用以上两个方式返回的原页面路由参数消失，此时使用$router.back(-1)返回原页面路由，参数仍存在。 go(-1):原页面表单中的内容会丢失； this.$router.go(-1):后退+刷新； this.$router.go(0):刷新； this.$router.go(1):前
vue实现刷新当前页和返回上一页
水越帆的博客
11-15 1万+
返回上一页很简单，只需要加上@click="$router.back()"即可。 刷新当前页，首先在app.vue的加上v-if属性 <router-view v-if="isRouterAlive"></router-view> 在data里面加上isRouterAlive,当然这个属性名可以自己定义，默认值为true data () { ...
vue 路由前进和后退界面刷新
木槿之夏
10-11 1733
问题描述： 点击编辑按钮跳转到新界面，编辑之后保存跳转到原来的界面，这时候原来的界面没有刷新， this.$router.back(-1); 返回到上一个界面 用watch 监听路由的变化，通过监听路由的变化，从新加载数据 watch: { $route(to) { if (to.path === '/panDian') { this.ajaxLoadDat...
Vue路由切换页面不更新问题解决方案
11-19
总结来说，解决Vue路由切换页面不更新的问题主要依赖于理解Vue的组件复用机制以及如何通过`:key`或`v-if`策略来强制组件重新渲染。在设计和编写路由切换逻辑时，应该考虑这些因素，以确保应用程序的正常运行和用户...
vue 解决路由只变化参数页面组件不更新问题
10-16
`后面的部分），而路径本身保持不变，Vue Router默认不会触发组件的重新渲染，这可能导致页面组件不更新的问题。本文将深入探讨这个问题，并提供解决方案。 首先，我们需要了解Vue Router的工作原理。当路由路径...
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
10-15
但这些方法同样没有解决问题，数据依旧未能实时更新。 问题的解决方法涉及到了Vue的响应式原理。在Vue中，当数据发生改变时，视图会自动更新以反映这些变化。但是在详情页跳转时，由于页面没有刷新，数据的变动无法...
解决vue多个路由共用一个页面的问题
08-27
解决 Vue 多个路由共用一个页面的问题 在 Vue 开发中，遇到多个路由需要共用一个页面的需求是非常普遍的，特别是当路由是通过动态添加的，不同的路由展示的东西只是数据不同其他没有变化。这篇文章将与您分享解决 ...
vue中this.$router.back()、this.$router.go()的区别使用
weixin_45941064的博客
04-08 1万+
vue中this.$router.back()、this.$router.go()的区别使用
Vue------this.$router.back()、this.$router.go()的异同
COCOLI_BK的博客
05-27 5687
返回上一个页面： 1.$router.back() 2.$router.go() 区别点在于： go(-1): 原页面表单中的内容会丢失； this.$router.go(-1)：后退+刷新； this.$router.go(0)：刷新； this.$router.go(1) ：前进 back(): 原页表表单中的内容会保留；在返回界面传递参数； this.$router.back():后退 ； this.$router.back(0) 刷新； this.$router.back(1)：前进
Vue 路由 跳转【返回、刷新，前端rxjava面试
m0_60732644的博客
03-28 1710
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】6848087)][外链图片转存中…(img-m42KaWSC-1711586848088)][外链图片转存中…(img-21mZHEz6-1711586848088)]
vue中刷新页面或跳转前一页面
qq_44774831的博客
02-10 1005
go(-1): 原页面表单中的内容会丢失； this.$router.go(-1)：后退+刷新； this.$router.go(0)：刷新； this.$router.go(1) ：前进 back(): 原页表表单中的内容会保留； this.$router.back():后退 ； this.$router.back(0) 刷新； this.$router.back(1)：前进 ...
vue，vue-router实现浏览器返回不刷新页面
weixin_30709929的博客
05-27 1271
当我们在写单页应用的时候，前端路由采用vue-router实现，如果从页面A跳到页面B，然后点浏览器返回，返回到页面A时，页面会刷新。最近遇到一个需求，一个列表页，用户会根据条件进行筛选，也可以翻页，当用户筛选后点击具体的某一个条目时，进入详情页查看编辑详情，用户点击返回时，希望之前页面的筛选条件也能够保留。查找相关资料，vue中有个keep-alive组件可以对组件进行缓存，这样当页面返回时就不...
vue中this.$router.back()与this.$router.go(-1)返回上一页的区别
m0_67402341的博客
03-09 1708
go(-1): 原页面表单中的内容会丢失； this.$router.go(-1)：后退+刷新； this.$router.go(0)：刷新； this.$router.go(1) ：前进 back(): 原页表表单中的内容会保留； this.$router.back():后退 ； this.$router.back(0) 刷新； this.$router.back(1)：前进 ...
vue 之返回上一页按钮 $router.back(-1) 刷新当前页：this.$router.go(0);
夜阑珊妖妖
11-20 7165
vue 之返回上一页按钮 <img src="@/assets/img/nav-prve.png" alt="" class="navprve" @click="$router.back(-1)" />   其他文章：https://www.cnblogs.com/cheng...
vue返回上个页面，页面不刷新，使用vue的keep-alive
努力奔跑的小不点
03-22 8395
1.在路由上添加keepAlive为true，该页面缓存，进去该页面，不会刷新 { path: 'list', component: () => import('@/views/merchants/list'), name: 'merchantsList', meta: { title: '商户列表', noCache: false, keepAlive: true } }, 2.在app.vue添加以下内容 <keep-alive> <router-view
vue中 this.$router.go(-1) 失效，路由改变了，界面未刷新
xuelong的博客
12-25 3622
在vue项目中使用this.$router.go(-1)返回上一页时，发现有时候该功能是正常的，有时候，路由改变了，但页面依旧停留在当前界面。
vue路由更新网页不渲染
最新发布
06-20
### Vue 路由更新后网页不重新渲染的解决方案 在 Vue 中，当路由更新但页面未重新渲染时，通常是由于组件复用或条件渲染逻辑导致的。以下是几种常见的解决方法： 1. **使用 `key` 属性强制重新渲染组件** 在 `router-view` 上添加一个唯一的 `key` 属性，可以确保每次路由变化时组件都被重新渲染。通过将 `key` 设置为当前路由的路径或参数，可以实现这一目标[^1]。 ```vue <router-view :key="$route.fullPath"></router-view> ``` 2. **使用条件渲染 `v-if`** 通过在 `router-view` 上添加 `v-if` 指令，并结合一个布尔值控制组件的显示与隐藏，可以实现手动控制渲染逻辑。例如，设置一个默认为 `true` 的变量，在需要刷新时将其置为 `false`，并在数据更新后使用 `$nextTick` 将其重新置为 `true`[^1]。 ```vue <router-view v-if="isRouterAlive"></router-view> ``` 在 Vue 实例中定义 `isRouterAlive` 并提供刷新方法： ```javascript export default { data() { return { isRouterAlive: true }; }, methods: { reload() { this.isRouterAlive = false; this.$nextTick(() => { this.isRouterAlive = true; }); } } }; ``` 3. **使用 `$forceUpdate()` 强制更新视图** 如果发现数据更新但视图未同步渲染，可以尝试调用 Vue 的 `$forceUpdate()` 方法强制触发视图更新。这种方法适用于深层嵌套的数据更新场景[^2]。 ```javascript this.$forceUpdate(); ``` 4. **检查路由配置和组件生命周期** 确保路由配置正确无误，并且组件的生命周期钩子（如 `beforeRouteUpdate`）被正确使用。如果路由参数发生变化但组件未重新加载，可以在 `beforeRouteUpdate` 中手动处理逻辑[^3]。 ```javascript beforeRouteUpdate(to, from, next) { // 处理路由参数变化的逻辑 this.someData = to.params.someParam; next(); } ``` 5. **编程式导航与查询参数** 如果需要传递查询参数，可以通过编程式导航实现。但需要注意的是，这种方式可能导致页面刷新后出现问题。因此，建议在刷新后手动触发某些事件以确保视图正确渲染[^4]。 ```javascript this.$router.push({ path: '/some-path', query: { id: 123 } }); ``` ### 注意事项 - 使用 `key` 属性是推荐的解决方案，因为它既简单又高效。 - `$forceUpdate()` 应作为最后的选择，因为它可能会带来性能开销。 - 确保路由配置文件中没有遗漏任何必要的选项。 ```javascript // 示例：Vue Router 配置 import Vue from 'vue'; import Router from 'vue-router'; import Home from './components/Home.vue'; import About from './components/About.vue'; Vue.use(Router); export default new Router({ routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] }); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值