watch: {
$route(to) {
console.log(to)
if (to.path.indexOf('index') != -1) {
//路由变化后重新获取帖子列表
this.$http.get('/api/communityList').then((res) => {
if (res.data.errCode === 0) {
let getRes = res.data.data.hotList
this.postList = getRes
}
})
}
}
}

vue使用watch 观察路由变化,重新获取内容的更多相关文章

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

    更新:11-29 时隔半年,又重新使用VUE进行开发,有了新方案--beforeRouteLeave 在组件内直接使用,前提是你用了vue-router: beforeRouteLeave (to, ...

  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. 卡在 构建 gradle 项目信息

    之所以卡死是因为Android Studio在初次构建的时候,会联网进行gradle目录的更新操作.断网之后就不会去主动更新了. 断网. 打开项目. 把 gradle 改成 使用当地. ======= ...

  2. 1038 一元三次方程求解 2001年NOIP全国联赛提高组

    题目描述 Description 有形如:ax3+bx2+cx+d=0  这样的一个一元三次方程.给出该方程中各项的系数(a,b,c,d  均为实数),并约定该方程存在三个不同实根(根的范围在-100 ...

  3. AFO 我的oi生涯 大结局

    今儿个哥几个一屋子退役了,这两天也许会写一个生涯大结局留作纪念吧. 今天就写了吧. 由于在机房的原因比一般同学获得的知识更多一些.进来总是看新闻,感慨颇多.自从两会开的第一天起,我就对我们政府采取的一 ...

  4. NOI.AC NOIP模拟赛 第四场 补记

    NOI.AC NOIP模拟赛 第四场 补记 子图 题目大意: 一张\(n(n\le5\times10^5)\)个点,\(m(m\le5\times10^5)\)条边的无向图.删去第\(i\)条边需要\ ...

  5. Codeforces Round #397 by Kaspersky Lab and Barcelona Bootcamp (Div. 1 + Div. 2 combined) A. Neverending competitions 水题

    A. Neverending competitions 题目连接: http://codeforces.com/contest/765/problem/A Description There are ...

  6. 2016-2017 CT S03E06: Codeforces Trainings Season 3 Episode 6(8/13)

    2016-2017 CT S03E06: Codeforces Trainings Season 3 Episode 6 比赛连接: http://codeforces.com/gym/101124/ ...

  7. mysql 阿里内核人员

    丁奇 http://dinglin.javaeye.com/ 鸣嵩 @曹伟-鸣嵩 (新浪微博) 彭立勋 http://www.penglixun.com/ 皓庭 http://wqtn22.iteye ...

  8. Sqlite3+EF6踩的坑

    摘要 最近在用winform,有些数据需要本地存储,所以想到了使用sqlite这个文件数据库.在使用Nuget安装sqlite的时候,发现会将Ef也安装上了,所以想着使用EF进行数据的操作吧,所以这就 ...

  9. SNK 与PFX

    snk 1用来证明这个生成的程序集是你发布的: 2如果你写的程序集要用在多个应用程序上的话,那么这个程序集必须要拥有唯一的名称,这个强名称是程序集唯一名称的一部分. 3只要你保护好你的snk文件不要公 ...

  10. ansible经常使用模块使用方法

    ansible 默认提供了非常多模块来供我们使用. 在 Linux 中,我们能够通过 ansible-doc -l 命令查看到当前 ansible 都支持哪些模块,通过 ansible-doc  -s ...