Vue 解决route-link路由跳转时页面不刷新问题

最新推荐文章于 2024-07-25 11:00:49 发布
最新推荐文章于 2024-07-25 11:00:49 发布
阅读量4.4k 收藏 2
点赞数 4
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46274901/article/details/130177329
版权

Vue 解决route-link路由跳转时页面不刷新问题

1.分析

在使用route-link跳转路由时，每次跳转，页面都不会刷新。是因为路由跳转并非页面刷新，而我们获取数据的方法都是写在created钩子函数中，所以，created并不会每次都执行，从而导致页面数据没有刷新。

2.解决方法

<keep-alive>
        <router-view :key="$route.fullPath"></router-view>
 </keep-alive>

在router-view标签中加入:key="$route.fullPath"即可

兴奋の大公猴
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
解决vue 路由变化页面数据不刷新的问题
08-27
本篇文章将深入探讨如何解决Vue路由变化时页面数据不刷新的问题。 首先，我们需要理解Vue Router的工作原理。Vue Router采用的是单页面应用程序（SPA）模式，当路由改变时，视图（View）通常应该根据新的路由参数...
vue-router路由与页面间导航实例解析
11-30
Vue.js的路由管理工具vue-router是构建单页面应用的关键组件，它允许开发者通过定义路径来控制页面间的导航，实现无刷新的页面切换效果。在传统的Web应用中，页面跳转通常涉及服务器请求，而在vue-router驱动的单...
解决路由跳转到同一个页面，vue页面不刷新问题
记录本人工作中遇到的问题、经验总结以及分享。
02-14 744
原理：使用 watch 监听路由变化，手动更新数据。
解决vue路由发生了跳转但是界面没有任何反应问题
weixin_74285634的博客
12-13 8914
在vue中，我们使用路由（Router）来实现页面的跳转。但是有时候我们会遇到这样一种问题：点击页面中的导航链接，路由发生了跳转，但是网页的界面没有任何变化。这是什么原因呢？这通常是因为我们的路由跳转没有更新对应的视图（View）导致的。那么如何解决这个问题呢？下面，我将为大家介绍两种解决方案。
【vue2新增页面跳转列表页，当前页面不会刷新问题，有效果的点个赞嗷】
demotang的博客
05-31 582
解决vue2新增页面走路由，跳转列表页，当前页面不会刷新问题。
解决Vue的router-link路由跳转但页面没有刷新问题
weixin_49884716的博客
11-15 4245
vue
Vue的router-link路由跳转但页面没有刷新！！
实事求是，艰苦奋斗，小小的梦想，终将实现。
02-18 2446
原因 vue-router中router-link路由跳转也传统的路由跳转不同，vue-router的路由跳转其实是组件之间的跳转。因此：在跳转相同组件不会触发vue的视图更新。 解决方法 在router-view上添加 :key="$route.fullPath"属性即可。 <router-view :key="$route.fullPath" /> ...
vue-router踩的坑之产品路由之间跳转页面不刷新
邪小新的博客
09-10 1120
使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象： watch: { '$route': function (...
vue-router连续跳转同一路由页面，页面不刷新的解决办法
xiaoyuer_2020的博客
10-11 3558
跳转当前路由不会刷新页面，但route路由数据已经发生了变化，那么我们使用vue的watch去检测这样的变化，然后再重新请求数据请求接口即得到想要的数据。当前在 /order/detail 页面，继续跳转当前页面，传参不同。
Vue - route路由跳转
Maggieq8324的博客
09-13 2532
目录前言基本路由跳转router-link 跳转路由router.push 跳转路由 前言 vue中的route实现了从一个页面跳转到另一个页面的功能 基本路由跳转 router.js import { createRouter, createWebHashHistory } from 'vue-router' import Home from '../views/home.vue' import Detail from '../views/detail' const routes = [ {
VUE 使用router-link路由参数变化，页面数据不刷新问题
Schaffer的博客
07-13 2491
出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听，退出页面再进入另一个文章页面并不会运行created组件生命周期，导致文章数据还是第一次进入的数据。 解决方法：watch监听路由是否变化 watch: { // 方法1 '$route': function (to, from) { // 监听路由是否变化 console.log('123456789', to, from) if (this.$rout
vue router-view解决 router-link跳转不刷新页面问题
m0_73533910的博客
07-19 1021
跳转前fullPath:http://localhost:8080/#/xxx?跳转后fullPath:http://localhost:8080/#/xxx?由于跳转前的路由path跟跳转后的路由path是一样的，所以vue会复用组件，不会刷新组件。跳转前路由fullPath跟跳转后的路由fullPath不一样，会刷新页面。以上路由path:http://localhost:8080/#/xxx。渲染页面(例如动态路由参数的变化)
vue-router跳转时打开新页面的两种方法
12-08
记录一下在vue项目中如何实现跳转到一个新页面（一个比较简单又比较基础的问题了），有两个方法： 1、<vue>标签实现新窗口打开 官方文档中说 v-link 指令被 <router> 组件指令替代，且 <router> 不支持 target=”_...
详解vue-router 2.0 常用基础知识点之router-link
12-09
Vue Router 是 Vue.js 应用中的官方路由库，它允许我们管理应用的导航和页面间的交互。在Vue 2.0中，`router-link`组件是用于创建导航链接的关键元素，它与`router-view`配合使用，实现了单页面应用(SPA)的页面切换...
vue router-link传参以及参数的使用实例
01-19
”{path:’/test’,query:>跳转(id是参数) 使用：this.$route.query.id ...”‘/test/’+id”>跳转(id是参数) ...使用：this.$route.params.id（这个id给上图路由的配置有关） this.$route是一个数组，里面包含路
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 397
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
vue单页面 全屏 使用 screenfull 实现全屏（左侧菜单栏隐藏）
最新发布
m0_71835253的博客
07-25 519
vue单页面 全屏 使用 screenfull 实现全屏（左侧菜单栏隐藏）_vue在打开一个界面的时候隐藏侧边栏-CSDN博客
VUE中的重点*
qq_61132537的博客
07-22 1091
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue router-link页面跳转并刷新跳转页面
05-26
在 Vue 中使用 `vue-router` 跳转页面时，默认情况下是不会刷新页面的。如果需要在跳转页面时刷新页面，可以使用以下方法： 1. 利用 `key` 属性强制组件重新渲染：在 `router-link` 标签上添加 `:key="$route.fullPath"` 属性，这样在路由发生变化时，组件会重新渲染，从而达到刷新页面的效果。 ``` <router-link :to="{ path: '/example' }" :key="$route.fullPath">跳转到 Example 页面</router-link> ``` 2. 利用 `watch` 监听 `$route` 对象的变化：在组件内部添加以下代码，当 `$route` 对象发生变化时，执行 `window.location.reload()` 方法刷新页面。 ``` watch: { $route: function() { window.location.reload(); } } ``` 以上两种方法都可以实现页面跳转并刷新跳转页面的效果，具体使用哪种方法，可以根据具体场景选择。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

兴奋の大公猴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值