更新: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 观察路由变化,重新获取内容的更多相关文章

  1. vue使用watch 观察路由变化,重新获取内容

    watch: { $route(to) { console.log(to) if (to.path.indexOf('index') != -1) { //路由变化后重新获取帖子列表 this.$ht ...

  2. vue监听路由变化

    使用 watch,观察路由,一旦发生变化便重新获取数据 watch: { // 如果路由有变化,会再次执行该方法 '$route': 'fetchData' }

  3. vue 如何通过监听路由变化给父级路由菜单添加active样式

    1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...

  4. Vue(三)之前端路由

    01-前端路由 1.前端路由的实现原理 vue+vue-router 主要来做单页面应用(Single Page Application) 为什么我们要做单页面应用? (1)传统的开发方式 url改变 ...

  5. Vue-- 监听路由变化,数据无法更新?

    之前写的Vue项目,有个问题困扰了好久.新闻板块有推荐.精华.最新等几个Tab,设想通过切换Tab,改变路由参数(get/news/:tab)去获取对应数据,然后渲染到页面(用的是同一套组件),问题来 ...

  6. vue - 过滤器-钩子函数路由

    一.关于路由 1.使用vue router 本质上是声明一种可以通过路径进行 挂子,用子 找到对应的 template 进行页面渲染 <!DOCTYPE html> <html la ...

  7. 路由传值及获取参数,路由跳转,路由检测,this.$route.query和this.$route.params接收参数,HttpGet请求拼接url参数

    配置动态路由参数id: routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] html路由跳转: <router- ...

  8. vue之vue-router嵌套路由

    1.定义路由 routes: [ { path: '/product', //第一层路由 name: 'product', component: Vproductcontent,//父组件渲染的是子组 ...

  9. vue学习记录④(路由传参)

    通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中 ...

随机推荐

  1. centos7虚拟机安装elasticsearch6.4.x-遇到的坑

    OS:Centos7x虚拟机 1H2Gjdk:1.8elasticsearch:5.6.0 1.下载“elasticsearch-5.6.0.tar.gz”解压到/usr/local/elastics ...

  2. 22.Generate Parentheses (String; Back-Track)

    Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...

  3. LUA Metatables

    __index:当我们访问一个表中的元素不存在时,则会触发去寻找__index元方法,如果不存在,则返回nil,如果存在,则返回结果. 博主注:__index有点像异常处理的意思 __newindex ...

  4. a=a++问题引发的思考

    使用javap命令解析出来的a=a++过程的字节码(int a=1; a=a++): 0: iconst_1  将数值1压入栈顶 1: istore_1  栈顶值1存入局部变量表的第一个slot中 2 ...

  5. jQuery的节点操作

    1.创建节点 var aa = $("<div id='cccc'>插入的内容</div>") var bb = $("<a href='h ...

  6. android 的AlertDialog对话框

    private int selectedFruitIndex = 0;  private void showMsg2() {//  Dialog alertDialog = new AlertDial ...

  7. android studio快捷键大全

    ----常用快捷键 1.Ctrl+E,可以显示最近编辑的文件列表 2.Shift+Click可以关闭文件 3.Ctrl+[或]可以跳到大括号的开头结尾 4.Ctrl+Shift+Backspace可以 ...

  8. Basic4android v3.50 发布

    这次发布的主要是debug 的增强.说实话,在这一方面B4a 比delphi做的要好.希望delphi 在新的版本里面 能进一步加强. I'm happy to release Basic4andro ...

  9. java内存溢出异常

    名称 特征 作用 配置参数 异常 程序 计数器 占用内存小,线程私有, 生命周期与线程相同 大致为字节码行号指示器 无 无 虚拟机栈 线程私有,生命周期与线程 相同,使用连续的内存空间 Java 方法 ...

  10. 密码分析:使用 Ettercap 和 它的 ARP 毒化功能来嗅探流量

    vim /etc/etterconf 将 ec_uid 和 ec_gid 改为 0 需要取消下面的 IPTABLES 行的注释.它在靠近文件末尾的 LINUX 一节 ettercap -G Shift ...