【vue】——使用watch 观察路由变化,重新获取内容
更新:11-29
时隔半年,又重新使用VUE进行开发,有了新方案——beforeRouteLeave
在组件内直接使用,前提是你用了vue-router
:
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
完.....
问题背景:
点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图:
页面代码如下:
<script>
export default {
data() {
return {
data: {}
}
},
methods: {
fetchDate() {
// 使用 axios获取数据
......
},
created() {
this.fetchDate();
}
}
</script>
解决办法:
使用 watch,观察路由,一旦发生变化便重新获取数据!
<script>
export default {
data() {
return {
data: {}
}
},
methods: {
fetchDate() {
// 使用 axios获取数据
......
},
created() {
// 组件创建完后获取数据,
// 此时 data 已经被 observed 了
this.fetchDate();
},
watch: {
// 如果路由有变化,会再次执行该方法
"$route": "fetchDate"
}
}
</script>
【vue】——使用watch 观察路由变化,重新获取内容的更多相关文章
- vue使用watch 观察路由变化,重新获取内容
watch: { $route(to) { console.log(to) if (to.path.indexOf('index') != -1) { //路由变化后重新获取帖子列表 this.$ht ...
- vue监听路由变化
使用 watch,观察路由,一旦发生变化便重新获取数据 watch: { // 如果路由有变化,会再次执行该方法 '$route': 'fetchData' }
- vue 如何通过监听路由变化给父级路由菜单添加active样式
1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...
- Vue(三)之前端路由
01-前端路由 1.前端路由的实现原理 vue+vue-router 主要来做单页面应用(Single Page Application) 为什么我们要做单页面应用? (1)传统的开发方式 url改变 ...
- Vue-- 监听路由变化,数据无法更新?
之前写的Vue项目,有个问题困扰了好久.新闻板块有推荐.精华.最新等几个Tab,设想通过切换Tab,改变路由参数(get/news/:tab)去获取对应数据,然后渲染到页面(用的是同一套组件),问题来 ...
- vue - 过滤器-钩子函数路由
一.关于路由 1.使用vue router 本质上是声明一种可以通过路径进行 挂子,用子 找到对应的 template 进行页面渲染 <!DOCTYPE html> <html la ...
- 路由传值及获取参数,路由跳转,路由检测,this.$route.query和this.$route.params接收参数,HttpGet请求拼接url参数
配置动态路由参数id: routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] html路由跳转: <router- ...
- vue之vue-router嵌套路由
1.定义路由 routes: [ { path: '/product', //第一层路由 name: 'product', component: Vproductcontent,//父组件渲染的是子组 ...
- vue学习记录④(路由传参)
通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中 ...
随机推荐
- centos7虚拟机安装elasticsearch6.4.x-遇到的坑
OS:Centos7x虚拟机 1H2Gjdk:1.8elasticsearch:5.6.0 1.下载“elasticsearch-5.6.0.tar.gz”解压到/usr/local/elastics ...
- 22.Generate Parentheses (String; Back-Track)
Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...
- LUA Metatables
__index:当我们访问一个表中的元素不存在时,则会触发去寻找__index元方法,如果不存在,则返回nil,如果存在,则返回结果. 博主注:__index有点像异常处理的意思 __newindex ...
- a=a++问题引发的思考
使用javap命令解析出来的a=a++过程的字节码(int a=1; a=a++): 0: iconst_1 将数值1压入栈顶 1: istore_1 栈顶值1存入局部变量表的第一个slot中 2 ...
- jQuery的节点操作
1.创建节点 var aa = $("<div id='cccc'>插入的内容</div>") var bb = $("<a href='h ...
- android 的AlertDialog对话框
private int selectedFruitIndex = 0; private void showMsg2() {// Dialog alertDialog = new AlertDial ...
- android studio快捷键大全
----常用快捷键 1.Ctrl+E,可以显示最近编辑的文件列表 2.Shift+Click可以关闭文件 3.Ctrl+[或]可以跳到大括号的开头结尾 4.Ctrl+Shift+Backspace可以 ...
- Basic4android v3.50 发布
这次发布的主要是debug 的增强.说实话,在这一方面B4a 比delphi做的要好.希望delphi 在新的版本里面 能进一步加强. I'm happy to release Basic4andro ...
- java内存溢出异常
名称 特征 作用 配置参数 异常 程序 计数器 占用内存小,线程私有, 生命周期与线程相同 大致为字节码行号指示器 无 无 虚拟机栈 线程私有,生命周期与线程 相同,使用连续的内存空间 Java 方法 ...
- 密码分析:使用 Ettercap 和 它的 ARP 毒化功能来嗅探流量
vim /etc/etterconf 将 ec_uid 和 ec_gid 改为 0 需要取消下面的 IPTABLES 行的注释.它在靠近文件末尾的 LINUX 一节 ettercap -G Shift ...