vue相同路由传不同参数组件刷新和组件接收路由参数问题

最新推荐文章于 2023-11-28 13:58:11 发布
原创 最新推荐文章于 2023-11-28 13:58:11 发布 · 1.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在Vue和vue-router环境下，如何根据不同路由参数动态更新二级路由页面内容及过渡效果。介绍了三种方法：中间路由替换、使用v-if重新渲染组件、通过修改组件key值强制刷新。并解释了$router和$route的区别，以及query和params传参的用法。

用uve和vue-router开发移动页面时，在一个二级路由页面想根据不同的参数展示不同的内容，并且有过渡效果：
在网上搜罗了一下监听路由参数变化然后刷新组件的方式有好多种

  • 1，为相同路由跳转进行中间路由替换（全局守卫进行拦截，这种方法我没试）

  • 2，使用v-if重新渲染当前页面组件，大体在data中设置一个boolean变量,然后定义一个reload方法，在方法中动态改变
    boolean变量的值。需要重新渲染组件的时候只要调用 下reload方法就可以。

  • 3，最简单快速的方法：
    利用vue组件中的key值来强制刷新（可以自行去查官方文档 ）

            `<router-view :key="newsId"></router-view>`

    监听组件刷新问题结束后，第二个就是滑动时改成路由参数，在滑动方法中增加

    this.$router.push({path:'subNews',query:{newsId: this.newsId}})
    这里就会用到路由中query 和params传参的区别

    首先说明下 $router 和 $route 的区别
    - $router : 是路由操作对象，只写对象
    - $route : 路由信息对象，只读对象

在router-view 组件内部用
console.log(this.$route.query.newsId)

到此问题解决

木子人青
关注
Vue2路由守卫：解决路由传参页面刷新后参数消失的问题
l_q_l的专栏
08-24 3315
sessionStorage和localStorage都是HTML5提供的Web Storage API的一部分，用于在客户端存储数据。它们的主要区别在于数据的生命周期、存储的持久性以及适合的应用场景。sessionStorage适合存储临时数据，而localStorage适合存储需要长期保存的数据。两者都有5MB的存储空间限制，且只能存储字符串类型的数据，但可以通过序列化和反序列化的方式存储其他类型的数据。
vue跳转到同一路由但传递参数不同，从而判断页面显示内容
weixin_48669322的博客
04-15 1563
vue跳转到同一路由但传递参数不同，从而判断页面显示内容
vue解决多个页面同一个路由但是传参不同导致页面跳转数据不刷新
qq_46617584的博客
02-08 2675
vue解决多个页面同一个路由但是传参不同导致页面跳转数据不刷新
vue中组件传参的几种方法
zhangkunsir的博客
05-03 1万+
以上是Vue中组件传参的三种常用方法，分别是Props、$emit和Provide/Inject。通过这些方法，我们可以在组件之间传递数据，实现组件之间的通信。
vue跳转相同路由（传递不同参数）时，该路由不刷新
m0_49159526的博客
10-31 1113
data() { return { id: '', } }, mounted() { this.id = this.$route.query.id this.get_detail() // 获取该路由页面内容的方法 }, watch: { $route(to, from) { // console.log(to) this.id = this.$route.query.id this.get_..
vue 同路由携带不同参数跳转无法刷新问题解决方法
m0_54070657的博客
11-28 4508
当跳转同一路由，携带不同参数时，组件会被复用，生命周期之前创建了一次，不会再次重新创建，因此页面不会刷新。方法三：当一个组件复用时，传递的参数发生变化就会触发这个钩子函数，在路由配置中使用。监听路由参数的变化，并在参数变化时手动执行相应的逻辑来实现刷新页面的效果。守卫，该守卫会在当前路由更新时被调用，可以在守卫中执行刷新页面的逻辑。属性给组件添加唯一标识，当路由参数发生变化时，通过修改。中，在需要刷新页面时，通过修改参数的值来触发刷新。来管理路由参数，在每次路由跳转时将参数存储到。方法四：可以考虑使用。
vue在App.vue文件中监听路由变化刷新页面操作
10-14
provide选项允许一个祖先组件定义可供后代组件注入的数据或方法，而inject选项则允许后代组件接收这些提供的数据或方法。在文章的示例代码中，通过在App.vue中定义provide来提供一个reload方法，任何子孙组件都可以...
Vue页面跳转传递参数及接收方式
10-14
在Vue.js应用中，页面之间的跳转和参数传递是非常常见的操作。这有助于在不同组件间共享数据，特别是在大型单页应用程序（SPA）中。本文将详细介绍两种在Vue中实现页面跳转并传递参数的方法，以及如何接收这些参数。...
Vue 刷新当前路由的实现代码
10-16
文章标题中提及的“Vue 刷新当前路由的实现代码”涉及到几个不同的技术方案来完成这一目标。 1. 改变router-view中的key值 router-view是Vue Router中的一个组件，它是渲染动态组件的容器。通过动态改变router-view...
Vue实现远程获取路由与页面刷新导致404错误的解决
10-17
在Vue中，可以创建一个函数`transformJsonToRouter`，该函数接收远程获取的路由JSON字符串，并将其转换为Vue Router可识别的路由组件形式。在这个过程中，我们需要确保每个路由项都有对应的组件，并且处理好子路由的...
vue路由—实现经典布局（同一个路由，对应多个组件）
Scrow1204的博客
10-09 8927
要点： 1.router-view头部，侧边栏，主体内容区域三个区域，每个有一个占位符。 2.占位符定义一个name属性，跟components的第一个属性对应，这里component使用复数，同一个路由下匹配多个组件。 HTML代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta chars...
vue不同参数跳转同一路由，复用同一组件，动态路由实现
illusionGD的博客
08-27 3445
问题描述 有时候需要跳转同一个路由（或者复用同一组件），但是vue是不能实现同路由跳转的，但可以用其他方法实现需求，这里用作品页面案例举例。 需求 看图 实现 使用vue router的动态路由匹配，官方文档：动态路由匹配 代码 router文件中的路由设置，具体看官方文档 { path: '/work_exhibition/:workId', name: 'WorkExhibition', component: () => import('@/pages/WorkExh
解决vue 跳转相同路由携带不同参数，页面不渲染问题
zuo-yiran的博客
09-15 3311
解决跳转页面携带不同参数跳转相同路由，页面不会重新渲染的问题
快速了解 Vue 组件间的参数传递方式？
CjBkl的博客
06-30 465
（1）父子组件间通信 第一种方法是子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事 件，子组件通过 emit 触发事件来向父组件发送数据。 第二种是通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子 组件通过 $parent 获得父组件，这样也可以实现通信。 第三种是使用 provider/inject，在父组件中通过 provider 提供变量，在子组件中通过inject 来将变量注入到组件中。不论子组件有多深，只
Vue 跳转相同路由不同参数，解决页面数据不自动刷新
热门推荐
_夜渐凉
02-01 1万+
vue-router 是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。 传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是应该是路径之间的切换，也就是组件的切换 因此，如果需要跳转相同路由不同参数时，必须确保组件需要重新被渲染 ...
vue【详解】props —— 子组件接收父组件传入的参数
朝阳39的博客
01-14 9210
目录 限定参数的类型 限定参数必传 指定参数的默认值 对参数进行自定义校验 在子组件中，通过props接收父组件传入的参数 限定参数的类型 props:{ //参数可以任意类型 params0: null, //限定参数的类型为数值型 Number params1: Number, //限定参数的类型为字符串型，或 数值型 Number params2: [String, Number], }, 限定参数必传 props: ...
vue中相同路由传不同参数的模块展示进行跳转时页面不刷新问题解决方案
weixin_46408500的博客
09-06 896
2、在展示区的 router-view 标签上控制 key 属性变化。1、添加 watch 监听路由参数变化强制页面刷新。
react-router中不同路由使用相同组件重新渲染问题
weixin_30449239的博客
07-19 1383
在项目中，会遇到相同的路由，可能需要使用相同的页面（容器组件），如果点不同的路由需要重新查询，但是发现没有重新进容器的渲染周期，代码如下： export default ({match}) => ( <Switch> <Route path={`${match.url}/med-library`} component={me...
vue——同一个路由传参不同跳转，页面不刷新问题解决
yehaocheng520的博客
07-22 8280
好久都没有写vue-cli创建的项目了，现在一写，发现了好多坑。 今天遇到一个路由跳转的问题： 这个是非常常见的一个场景： 在当前商品详情页面跳转到另一个商品的详情页面，此时，路由相同，参数id不同 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/productDetail"——报错解决 结果我在使用this.$router.replace({path:'/pro
vue使用路由back返回参数怎么接收
最新发布
09-29
在Vue项目里，使用路由`back`返回时接收参数，可利用`query`传参达成。`query`传参是把参数放在URL上，刷新页面后参数依旧存在[^2]。 ### 1. 配置路由 首先，在`index.js`文件中配置路由，此文件专门用于创建整个应用的路由器。以下是示例代码： ```javascript // 该文件是专门用于创建整个应用的路由器 // 第一步引入插件(本质是一个构造函数) import VueRouter from 'vue-router'; // 引入一下用到的组件 import About from '../components/About'; // 第二步创建router实例对象并暴露 export default new VueRouter({ routes: [ { // path是路径 path: "/about", // 跳转的组件 component: About } ] }); ``` ### 2. 在跳转前页面传递参数 假设在某个页面要跳转到`about`页面并传递参数，示例代码如下： ```vue <template> <button @click="goBackWithParams">返回并传递参数</button> </template> <script setup> import { useRouter } from 'vue-router'; const router = useRouter(); const goBackWithParams = () => { router.back({ query: { id: 123, name: 'example' } }); }; </script> ``` ### 3. 在返回接收参数的页面获取参数 在返回后接收参数的页面（例如`about`页面），使用`useRoute`来获取参数，示例代码如下： ```vue <template> <!-- 页面内容 --> </template> <script setup> import { useRoute } from 'vue-router'; const route = useRoute(); console.log(route.query.id, '页面接收到的值'); console.log(route.query.name, '页面接收到的名称'); </script> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值