vue监听路由参数变化，组件复用执行相应逻辑

最新推荐文章于 2023-05-22 16:43:52 发布
最新推荐文章于 2023-05-22 16:43:52 发布
阅读量254 收藏 1
点赞数 1
分类专栏： 前端 # vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38708854/article/details/107179213
版权

响应路由参数的变化

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，这两个路由对应的页面组件都由同一个组件渲染，如果使用销毁再创建未免太消耗资源，如果直接导航过去，vue生命周期钩子函数不会有任何执行，因此需要使用监听函数来监听。

watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    },

他与created函数所在位置同级.

或者使用导航守卫

// don't forget to call next()
beforeRouteUpdate (to, from, next) {
    // react to route changes...
  },
野比大雄的代码危机
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 值发生改变时执行函数，重点（_.debounce）
baiyongliang
06-20 3896
VUE 当input或者一个变量发生改变时执行 一个对应的方法，具体如下： `_.debounce` 是一个通过 Lodash 限制操作频率的函数。 `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识， 请参考：https://lodash.com/docs#debounce <!DOCTYPE html> <html lang="en"> <meta name="viewport" content="width=device-width"&.
vue 监听路由变化
lifangfang0607的博客
01-07 172
项目中会有一些逻辑处理，需要接听路由来实现 vue2.x 中使用watch可以进行路由监听： watch:{ $route:{ handler(n,old){ console.log(n) // 逻辑处理 }, immediate: true, // 首次监听 } }
Vue中同一组件，如何监听路由参数的变化
coucouxie的博客
09-24 898
Vue中同一组件，如何监听路由参数的变化 比如http://localhost:8081/#/result?q=1和http://localhost:8081/#/result?q=3在同一组件下，仅仅是路由参数发生了变化，并不会引起触发Vue的生命周期，所以就不能通过生命周期的钩子来实现请求后端数据。 一开始想过go(0)和replace()通过刷新页面来实现，但是这样用户体验不太好。 可以通过watch属性来解决 watch:{ $route(){ this.query=this.$route.quer
vue-router响应路由参数的变化
weixin_33852020的博客
01-03 742
1.提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。仅仅只是路由的参数发生了变化，该路由是默认不做刷新操作的。为了解决这个问题 不想复用的话，就在父组件的router-...
第4章 Vue全家桶(vue-router+vuex) - 4.4 动态路由匹配和路由组件复用
jolinoy的博客
03-31 1242
下面是项目目录： User.vue代码： // User.vue里面的内容 <template> <div> 用户页面 {{$route.params.id}} </div> </template> <script> export default { //当路由参数变化时 /user/1切换到/user/2原来的组件实例会被复用 //因为两个路由渲染了同个组件
解决vue 路由变化页面数据不刷新的问题
08-27
默认情况下，Vue Router会监听路由的变化，并尝试重新渲染组件以反映这些变化。然而，如果数据不是通过`props`传递或者在`data`选项中声明的，那么Vue可能不会自动获取或刷新数据。 问题描述： 在一个帮助页面，...
vue-router 组件复用问题详解
08-28
解决组件复用问题的方法是使用 watch 侦听器来监听路由的变化情况，根据路由参数的变化来响应相应的数据。具体实现过程是： 1. 定义数据获取方法：定义一个获取文章的方法，根据文章 ID 从后台获取对应的文章信息。...
vue动态路由:路由参数改变,视图不更新问题的解决
10-16
自Vue Router 2.2版本起，引入了`beforeRouteUpdate`导航守卫，这是一个组件级别的守卫，专门用于处理路由参数变化的情况。在组件中定义这个守卫，你可以像这样处理： ```javascript export default { data () {...
Vue异步组件处理路由组件加载状态的解决方案
10-18
具体实现这个解决方案，我们可以编写一个名为 `lazyLoadView` 的函数，它接受一个异步组件（如 `import('@/components/home/Home.vue')`）作为参数，并返回一个 Promise 对象。这个 Promise 对象包含了加载、加载...
以不同的路由参数实现组件的复用以及监听路由参数的变化
darabiuz的博客
02-02 314
前提 当使用不同的路由参数时，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。所以才需要监听路由参数的变化以得到页面不同的数据渲染效果 使用watch监听路由参数的变化 watch: { // 用来监听路由参数'$route.params.id'的变化，handler方法表示监听到路由参数变化后所做出的动作，参数newVal表示新的值 '$route.params.id': { handler (n.
vue 使用同一组件，切换时不触发created、mounted钩子
weixin_53339757的博客
05-22 1253
vue 使用同一组件，切换时不触发created、mounted钩子
Vue如何在组件中监听路由/路由参数的变化
qq_41962532的博客
08-09 2477
Vue如何在组件中监听路由/路由参数的变化
vue 改变数据执行方法
李特成的博客
07-13 3017
&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;构造器&lt;/title&gt; &lt;/head&gt; &lt;body&a
vue 组件监听页面切换_vue监听url参数变化实现跳转当前页面组件复用并实现dom数据刷新解决方案...
weixin_42309178的博客
12-29 2198
解决思路：1、子路由组件监听URL变化a、created函数中：created: function () {var self = thisself.fetchData()this.$store.state.count = 0 //在中央状态管理区中添加一个count值来标识是否重新加载，当页面每次加载完后把count值重新设置为0},b、watch函数中：watch: {'$route': 'fe...
vue中监听路由参数变化的方法
热门推荐
weixin_37861326的博客
05-31 3万+
在vue项目中，假使我们在同一个路由下，只是改变路由后面的参数值，如果不监听路由参数值的变化，页面无数据刷新，需手动刷新浏览器，这样做就不是我们的预期效果。举例：当前路由为  /pjthome?pjtid=123456mounted: function () { this.pjtid = this.$route.query.pjtid this.pjtdetail() },...
vue中组件间参数传递和路由传参，div标签实现可复用组件超出屏幕横向滚动效果
The blog of CSDN in 杨天福
09-20 7114
router-link方式传参 router 中的index.js 配置路由 组件中跳转传参 :to="{name:‘MusicPlay’,params:{songid:item.song_id}}" <router-link tag="div" :to="{name:'MusicPlay',params:{songid:item.song_id}}" class="card u...
vue-router路由切换 组件重用挖下的坑
踩坑小王子
01-23 1万+
问题描述：vue-router导航切换 时，如果两个路由都渲染同个组件，组件会重（chong）用,组件的生命周期钩子不会再被调用,使得组件的一些数据无法根据 path的改变得到更新 ************************************************************************************************************
Vue 组件中监听路由变化
asing1elife's blog
09-12 3456
Vue 组件中监听路由变化 在 Vue 的组件中可以通过 watch 监听到当前路由的变化 更多精彩 更多技术博客，请移步 asing1elife’s blog 实现方式 在 watch 按照如下规则书写即可 该监听会在路由发生变化时触发 watch: { '$route' (val, old) { // 当前路由 con...
Vue 复用组件路由变化，页面不刷新 解决方法
Superman_peng的博客
07-12 925
路由参数变化，但是页面没有刷新这是Vue组件复用的默认处理方式 不想复用的话，就在父组件的<router-view>标签上加个key <router-view :key="$route.fullPath"></router-view>
Vue监听器、生命周期、组件通信和路由的学习感受
最新发布
07-09
我很高兴回答你关于Vue监听器、生命周期、组件通信和路由的学习感受问题。 在学习Vue监听器时，我发现它对于追踪数据的变化非常有帮助。通过监听器，我可以监控数据的改变，并在数据变化时执行相应的操作。这让我能够更好地控制和管理数据流，提高了应用的交互性和实时性。 对于Vue的生命周期，我觉得它提供了一种清晰的结构和顺序来管理组件的创建、更新和销毁。生命周期钩子函数允许我在不同的阶段执行特定的代码，从而更好地控制组件的行为和状态。这对于处理异步操作、资源清理以及与第三方库集成非常有帮助。 在组件通信方面，Vue提供了多种方式来实现父子组件之间的数据传递和通信。通过props和自定义事件，我可以在不同层级的组件之间进行数据的传递和同步。这种组件通信的机制非常灵活，使得组件之间的耦合度更低，代码更加可维护和可复用。 对于路由，Vue的vue-router插件提供了一种方便而强大的方式来实现前端路由功能。通过配置路由规则和导航链接，我可以实现页面之间的切换和导航，为用户提供更好的浏览体验。路由还可以帮助我实现按需加载组件，提高应用的性能和效率。 总的来说，学习Vue监听器、生命周期、组件通信和路由让我对Vue框架有了更深入的理解。这些概念的掌握使我能够更好地开发Vue应用程序，并提供更好的用户体验。我发现Vue的设计和实现非常灵活和易用，使得前端开发变得更加高效和愉快。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值