更新: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. JQuery常用函数及功能

    JQuery常用函数及功能小结 来源:http://blog.csdn.net/screensky/article/details/7831000 1.文档加载完成执行函数 $(document).r ...

  2. Ice_cream’s world II(最小树形图,加虚点)

    Ice_cream’s world II http://acm.hdu.edu.cn/showproblem.php?pid=2121 Time Limit: 3000/1000 MS (Java/O ...

  3. 协程库st(state threads library)原理解析

    协程库state threads library(以下简称st)是一个基于setjmp/longjmp实现的C语言版用户线程库或协程库(user level thread). 这里有一个基本的协程例子 ...

  4. ubuntu 出来菜单栏和任务栏

    http://blog.csdn.net/terence1212/article/details/51340595 命令行输入:sudo apt-get install compizconfig-se ...

  5. W-D-S-Nandflash

    1.6410的硬件一上电就会把nandflash前8K的内容拷贝到6410片内内存来,从片内内存0地址开始运行,如果烧写到nandflash里面的程序大于8k,则拷贝到6410片内的8k程序要把nan ...

  6. Undo Architecture

    [Undo Architecture] NSUndoManager is a general-purpose recorder of operations for undo and redo. NSU ...

  7. Synchronizer解析(为AQS打个铺垫)

    ReentranceLock 和 Semaphore有很多共同点,他们都像是一个gate一样, 来控制让哪些线程阻塞,让哪些线程通过. 不同的是,ReentranceLock允许通过的量是1,Sema ...

  8. leancloud js SDK 学习

    测试页面 AV.initialize("id", "key"); var TestObject = AV.Object.extend("TestObj ...

  9. ajax 调用示例

    $.ajax({ type: "post", url: url, data: { "key": "ValidateMobile", &quo ...

  10. 四.Jenkins的授权和访问控制

    默认的Jenkins不包含任何的安全检查,任何人可以修改Jenkins设置,job和启动build等.在多人使用的时候,显然会存在比较大的安全风险,所以需要配置Jenkins的授权和访问控制. [系统 ...