vue3.x:route路径相同参数不同页面不刷新解决

最新推荐文章于 2023-09-20 16:53:00 发布
原创 最新推荐文章于 2023-09-20 16:53:00 发布 · 2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue.js应用中使用`useRouter`和`useRoute`钩子来管理路由，重点讲解了`<router-view key=route.fullPath>`的用法，适合前端开发者理解Vue Router的基本操作。 
<router-view :key="route.fullPath"></router-view

JS中

import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
vue.runtime.esm.js:619 [Vue warn]: Duplicate keys detected: ‘/carsend‘. This may cause an update err
郭宝的博客
03-12 7112
背景： 在运行一个Vue项目时，出现了如下报错信息 vue.runtime.esm.js:619 [Vue warn]: Duplicate keys detected: '/carsend'. This may cause an update error. 解决办法： 错误提示说，检测到重复的密钥：“/carsend”。这可能会导致更新错误。 初步判断是路由路径重名了，那么根据这条线索，全局搜索/carsend 路由路径，查找相似路径，如下图所示，确实有两个相同的路由路径 那...
vue解决多个页面同一个路由但是传参不同导致页面跳转数据不刷新
qq_46617584的博客
02-08 2658
vue解决多个页面同一个路由但是传参不同导致页面跳转数据不刷新
项目中遇到的不同路由路由对应同一个页面，却不重新加载的问题
qq_44173499的博客
03-28 1328
页面对应的路由配置： // 基础管理 path: "/main/base", name: "base", component: Template, children: [ { // 基础管理-"企业安全台账管理"
vue3跳转统一页面，path一样，传递的参数不一样时页面不刷新
m0_70547044的博客
08-23 3218
当路由的path都是一样的，quary不一样，在跳转的时候，不会执行onMounted等方法，页面也就不会刷新。
vue3中当路由一样，参数quary不一样的跳转页面不刷新问题
weixin_42496938的博客
10-17 3903
当路由的path都是一样的，quary不一样，在跳转的时候，不会执行onMounted等方法，页面也就不会刷新。
vue相同的路由根据参数不同 ，刷新数据
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
09-03 1418
最近更新博客时需要在导航栏里增加一个分类的列表，但是分类的路由是同一个路由，只是后面的参数id不同，点击切换不同的列表时，发现URL正常了，但不是我想要的结果 引子 最近更新博客时需要在导航栏里增加一个分类的列表，但是分类的路由是同一个路由，只是后面的参数id不同，点击切换不同的列表时，发现URL正常了，但不是我想要的结果。因为就算路由发生了变化，数据还是没有变化，因为调用的依然是同一个组件，...
详解解决Vue相同路由参数不同不会刷新的问题
12-29
通常情况下我们喜欢设置keepAlive...同时在created 中触发请求，在路由参数不同的情况下并不会执行对应的操作。 解决方法： 1、给 router-view 设置 key 属性为路由的完整路径 $route.fullPath> 这种方法我觉得应该
vue.js this.$router.push获取不到params参数问题
11-20
在Vue.js应用中，路由是页面之间导航的关键组成部分。`this.$router` 是Vue Router提供的一个实例，用于处理页面的导航。在这个问题中，开发者遇到了使用`this.$router.push`传递`params`参数时无法在目标页面获取到...
vue 解决路由只变化参数页面组件不更新问题
10-16
如果新的路径与旧路径完全相同，即使查询参数不同，Vue Router也不会认为路由发生了变化，因此组件不会自动重新渲染。这在优化性能方面是有益的，因为大部分情况下，查询参数的改变并不影响页面的主体内容。 为了...
Uncaught (in promise) RangeError: Maximum call stack size exceeded at String.replace (<anonymous>) at encode (vue-router.esm.js:45:6) at eval (vue-router.esm.js:140:16) at Array.map (<anonymous>) at stringifyQuery (vue-router.esm.js:114:8) at getFullPath (vue-router.esm.js:218:26) at createRoute (vue-router.esm.js:172:15) at _createRoute (vue-router.esm.js:1730:12) at Object.match (vue-router.esm.js:1632:12) at VueRouter.match (vue-router.esm.js:2948:23) encode @ vue-router.esm.js:45 eval @ vue-router.esm.js:140 stringifyQuery @ vue-router.esm.js:114 getFullPath @ vue-router.esm.js:218 createRoute @ vue-router.esm.js:172 _createRoute @ vue-router.esm.js:1730 match @ vue-router.esm.js:1632 match @ vue-router.esm.js:2948 transitionTo @ vue-router.esm.js:2259 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095 runQueue @ vue-router.esm.js:2103 confirmTransition @ vue-router.esm.js:2400 transitionTo @ vue-router.esm.js:2268 replace @ vue-router.esm.js:2739 eval @ vue-router.esm.js:2386 eval @ permissions.js:64 iterator @ vue-router.esm.js:2370 step @ vue-router.esm.js:2095了解此错误
最新发布
07-12
为了避免此问题，应确保在重定向时明确判断当前路径，并避免重复跳转到相同的路径。改进后的代码如下： ```javascript router.beforeEach((to, from, next) => { if (localStorage.getItem(&#39;userInfo&#39;)) { if (to...
Vue.js使用vue-router进行路径相同，参数不同的路由跳转时，刷新数据的方法
WEN_Windy的博客
02-27 3152
参考链接：https://blog.csdn.net/weixin_41888813/article/details/86735664 当使用vue-router进行路径相同参数不同的路由跳转时，是不会自动刷新页面数据的，因此，需要自行刷新。自行刷新页面的方法有： 第一种：直接在函数中使用location.reload()刷新页面，这种方法不好用，假如在mounted生命周期中就需要调用传...
vue vue-router 同一个页面地址栏参数改变，页面不刷新的问题以及解决方案
Mr_Chp的博客
02-22 2432
原文章：vue vue-router 同一个页面地址栏参数改变，页面不刷新的问题以及解决方案 在开发中，难免会遇上各种问题，今天讲解一下，在vue项目中，只改变路由中的参数，路由地址不改变页面数据不刷新问题； 造成这个问题的原因，是因为 vue-router 同一个页面地址栏参数改变（比如文章的发布和编辑是同一个页面），不会触发vue的created或者mounted钩子，所以数据不会重新渲染。 解决方法： 1：监听地址栏变化（watch）,这是vue-router官方给出的解决办法。 监听路由变化，把.
vue3使用router.push()页面跳转后，该页面不刷新问题
热门推荐
wang13679201813的博客
09-20 1万+
这是一个常见问题，当使用push的时候，会向history栈添加一个新记录，这个时候，再添加一个完全相同的路由时，就不会再次刷新了。在页面跳转时加上params参数时间。在跳转到的页面，添加watch监视。
vue路由相同参数不同数据切换，数据不刷新问题
WishZJ的博客
08-23 962
vue路由相同参数不同数据切换，数据不刷新问题
Vue页面中使用this.$router.replace访问同一页面，数据不刷新的问题
qq_39182029的博客
05-13 1万+
Vue页面中使用this.$router.replace访问同一页面，数据不刷新的问题 问题原因： vue路由切换实际是组件间的切换，在我的详情页中，钩子方法使用的是created()方法，在不强制刷新或者重启时只会创建一次，所以引用相同组件的时候，页面数据就无法刷新。 我的解决方法： 方法1.在详情页添加一个watch监听路由变化（不推荐，每次返回时会刷新一次列表数据，用户体验不好） watch：{ '$route' (to,from){ this.$router.go(0); } } ​
vue-router路由组件传参，参数改变，页面不刷新问题
weixin_45150813的博客
05-10 2271
vue路由组件传参，参数改变页面不刷新
Vue路由还不会？别急看完这篇文章就会了
sobject的博客
03-06 484
前言 Vue Router 是Vue.js的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括： 嵌套路由映射 动态路由选择 模块化、基于组件的路由配置 路由参数、查询、通配符 展示由 Vue.js 的过渡系统提供的过渡效果 细致的导航控制 自动激活 CSS 类的链接 HTML5 history 模式或 hash 模式 可定制的滚动行为 URL 的正确编码 提示：以下是本篇文章正文内容，下面案例可供参考 一、Vue3 路由？ ...
解决 Vue 中路由跳转相同路径页面不刷新的问题
不知名人士的博客
01-20 3554
vue 中同一路由跳转由于不会重新执行生命周期，所以数据不更新。不管是动态路由，还是传参都不会刷新页面 最简单最常用的方式是监听路由变化，在路由发生变化后执行一系列操作 watch: { $route(to) { if (to.name === "check") { this.init() // 一般是执行你写在 mounted 下的方法 } } } ...
解决vue路由跳转同一页面，携带不同参数，页面不刷新的问题
m0_46692587的博客
05-22 1293
携带不同的参数跳转到同一路由，页面报错不刷新， 解决报错： 使用watch方法监听路由对象，实测有效 //相同路由跳转报错 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } 页面不刷新 watch:{ '$route'(to,
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值