首页 > Vue 监听路由变化的三种方式

Vue 监听路由变化的三种方式

方法一：通过 watch

// 监听,当路由发生变化的时候执行
watch:{$route(to,from){console.log(to.path);}
},

或 

// 监听,当路由发生变化的时候执行
watch: {$route: {handler: function(val, oldVal){console.log(val);},// 深度观察监听deep: true}
},

或

// 监听,当路由发生变化的时候执行
watch: {'$route':'getPath'
},
methods: {getPath(){console.log(this.$route.path);}
}

方法二：：key是用来阻止“复用”的。Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可(Vue文档原话)

computed: {key() {return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()}
}

 使用computed属性和Date()可以保证每一次的key都是不同的，这样就可以如愿刷新数据了。

方法三：通过 vue-router 的钩子函数 beforeRouteEnter  beforeRouteUpdate  beforeRouteLeave

 

更多相关：

  • bootstrap 新闻列表_kuapingUI 2.2 版本发布，跨屏 UI-bootstrap 大组件 UI 框架

    kuapingUI 2.2 版本发布，增加了一个比较实用的工具栏web组件，是由分享按钮组 + 联系按钮组构成，分享按钮组包含了 QQ空间、朋友圈、QQ、微信、微博等分享；联系按钮组包含了 微信、QQ、旺旺、Skype、电话等快捷沟通方式。演示地址 跨屏UI框架-响应式前端框架_基于Bootstrap的大组件UI框架​ui.kuapi...

  • vue暂存功能_示例vue 的keep-alive缓存功能的实现

    本篇文章主要介绍了vue 的keep-alive缓存功能的实现，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。#Vue 实现组件信息的缓存当我们在开发vue的项目过程中，避免不了在路由切换到其他的component再返回后该组件数据会重新加载，处理这种情况我们就需要用到keep-a...

  • js去掉前后空格的函数_2020年最火爆的Vue.js面试题

    2020年Vue面试题Interview●●●●作者：@烦恼会解决烦恼vue核心知识——理论篇1、对于Vue是一套渐进式框架的理解渐进式代表的含义是：主张最少。Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开...

  • 【进阶玩法】Angular用emit()实现类似Vue.js的v-model双向绑定[(ngModel)]功能

    app.component.html

    父组件字号：{{fontSizePx}}px

    app.component.ts ...fontSizePx=12...

  • Angular使用@Input和@Output实现父子组件互相传参（类似Vue的props和this.emit）

    app.component.html  app.component.ts import { Component } from '@angular/core'; @Component({selector: 'a...

  • groovy怎样从sql语句中截取表名_SQL常用的基础查询语句

    数据分析过程中，我们经常可以看到提数的SQL语句，了解SQL常用的基础查询语句，是检验提数逻辑是否正确的途径之一，并且也能更方便使用SMART BI数据分析工具。今天就让小编带大家走进SQL基础查询的世界吧~1、查询单个字段：语法：SELECT 字段名 FROM 表名举例：SELECT first_name FROM employ...

  • 数据库低端sql查询语句片段

      SELECT * FROM tableSELECT * FROM table WHERE name = '强哥'SELECT * FROM table ORDER BY updateTime DESC...

  • 使用OpenRowSet操作Excel Excel导入数据库

    使用 OpenRowSet 和 OpenDataSource 访问 Excel 97-2007 测试文件：D:97-2003.xls和D:2007.xlsx，两个文件的内容是一模一样的。 测试环境：SQL Server 2000 / 2005。 -------------------------------------------...

  • excel导入SQL脚本

    exec sp_configure 'show advanced options',1 reconfigure exec sp_configure 'Ad Hoc Distributed Queries',1 reconfigure SELECT * INTO tmp_asset FROM OPENROWSET('Microsof...

  • 经典sql语句

    select b.*,(select count(a.id) from td_product a where a.protypeid=b.id) num from td_protype b 转载于:https://www.cnblogs.com/shanlin/archive/2011/09/27/2192725.html...

  • 【硬核解说】一口气讲明白Angular的5种路由守卫RouteGuard是嘛玩意儿

    Angular的常用路由守卫有5种，按照执行顺序： ① CanLoad：进入到当前路由的时候触发（若用户没有权限访问，相应的模块并不会被加载。这里是指对应组件的代码）。 ↓② CanAcitivate：进入到当前路由的时候触发（即使返回的是false，用户并没有权限访问该路由，但是相应的模块会被加载）。 ↓③ CanActivate...

  • 几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取

    深度玩家可移步Angular - 常见路由任务 1、嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步加载//这就是嵌套路由↓children:[{path:'first-sub1',component:firstSub1Com...

  • r-route 命令 显示/配置ip路由表

    文章目录前言语法格式命令使用输出含义使用实例 前言 route命令用于显示和配置IP路由表，在不同节点间的网络通信，想要实现同一局域网之间的通信就需要交换机，不同局域网之间的通信就需要路由器。而路由器的存在是为了提供NAT转换，即提供ip地址和物理地址之间的映射关系，因为不同局域网节点之间的通信是需要直到对方局域网的外网ip...

  • 常见的路由选择算法

    一、路由表 所谓路由表，指的是路由器或者其他互联网网络设备上存储的表，该表中存有到达特定网络终端的路径，在某些情况下，还有一些与这些路径相关的度量。 二、常见路由表生成算法 路由算法是提高路由协议功能，尽量减少路由时所带来开销的算法。当实现路由算法的软件必须运行在物理资源有限的计算机上时高效尤其重要。路由算法必须健壮，即在出现...

  • vue路由对象（$route）参数简介

    路由对象在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。 so , 路由对象暴露了以下属性： 1.$route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，如 "/home/news" 。 2.$route.params 对象...

©2024 11GX.COM