vue路由参数改变，组件数据没重新更新问题

最近一段时间在用vue做项目，遇到一个很纠结的问题，本来是两个页面样式结构相似，就是数据不同，所以在router里面配置了一个id参数，发现vue路由参数改变，组件数据没重新更新，查了一下官方文档，发现复用组件时，想对路由参数的变化作出响应的话，可以简单地 watch (监测变化) $route 对象：

watch: {'$route' (to, from) { // data数据操作}}

简单试了一下，发现能解决问题，代码如下：

html代码

<template><div class="main-box"><div class="main-tit"><h2>{{title}}</h2></div><div class="main-con main-con-box"><el-tabs v-model="activeName" ><el-tab-pane label="未读动态" name="first"><div class="msg-list-box"><ul><li v-for="(item,index) in itemlis"  v-if="item.noview"><i class="no-view-ico" v-if="item.noview"></i><div class="msg-item"><div class="msg-item-pic"><img :src="'/src/assets/images/'+item.userpic"/></div><dl><dt>{{item.title}}</dt><dd>{{item.time}}</dd></dl></div></li></ul></div></el-tab-pane><el-tab-pane label="全部动态" name="second"><div class="msg-list-box"><ul><li v-for="(item,index) in itemlis"><i class="no-view-ico" v-if="item.noview"></i><div class="msg-item"><div class="msg-item-pic"><img :src="'/src/assets/images/'+item.userpic"/></div><dl><dt>{{item.title}}</dt><dd>{{item.time}}</dd></dl></div></li></ul></div></el-tab-pane></el-tabs></div></div>
</template>

js代码

<script>import Vue from'vue'import  VueResource  from 'vue-resource'Vue.use(VueResource)export default {data() {return {title:this.$route.params.id=="dy"?"动态":"系统通知",activeName: 'second',url:'/api/msgData',itemlis:[]};},mounted(){//加载数据，并遍历输出this.getAllMsg(this.url);},//监听watch: {'$route' (to, from) {//这部主要是两个页面标题不一样，所以做了判断，手动加判断改了一下this.title=this.$route.params.id=="dy"?"动态":"系统通知";//加判断主要发现这个加载了之后，容易引起其他页面也发送请求，所以加了笨方法，加了条件判断，解决了其他页面请求数据加载的问题if(this.$route.params.id){this.getAllMsg(this.url);}}},methods: {getAllMsg(url){//参数idurl+="?id="+this.$route.params.id;this.$http.get(url).then((res)=>{var arrJson=JSON.parse(res.bodyText)this.itemlis=arrJson.data.list},function(err){console.log(err)})}}};
</script>

刚入行vue，发现道路还很远，仍需努力。。。

vue路由参数改变，组件数据没重新更新问题相关推荐

vue v-for循环改变循环数据视图不更新
在前端开发中如下图菜单框架(左侧菜单内容由顶部菜单点击后动态更新data内 menu:[] )v-for循环menu显示左侧菜单问题:点击顶部菜单后(menu[]重新赋值),左侧菜单不能更新为新的m ...
vue 路由参数变化，页面不刷新（数据不更新）解决方法
路由参数改变,页面数据不更新解决方法: http://localhost:8080/#test?id=1 http://localhost:8080/#test?id=2,参数切换后,数据未更新以下 ...
vue 路由参数变化，页面不刷新，provide /inject 完美解决方案
此方法使用的是v-if来控制router-view的显示或隐藏,v-if从false变为true时,vue会重新渲染router-view区域,所以当参数变化时,只需让v-if 从true => ...
vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇
elementUI表格组件,response.data.newsLists列表如何循环出来?如何点击传参numId,并进入对应的内容页? 本文意图: 使用官方table组件:实现API调用:文章遍历. ...
Ant Design Pro路由参数改变页面没有重新渲染问题的解决
文章目录发现问题解决问题发现问题同一个组件根据Ant Pro路由传递进来的user和menu两个参数实现不同页面的渲染效果,测试发现页面在第一次渲染时没有问题,改变参数重新渲染则不刷新,如下所 ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...
before vue路由钩子_vue组件级路由钩子函数介绍，及实际应用
正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消. 有多种方式可以在路由导航发生时执行钩子:全局的.单个路由独享的.或者组件级的. 一.全局钩子你可以使用 rout ...
vue路由跳转子组件_vue-router之路由钩子（组件内路由钩子必须在路由组件调用，子组件没用）...
模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型hi ...
vue 同页面不同组件数据传递
不用 vuex 同页面不同组件数据传递,用vuex的这篇文章可以忽略! 直接举例: 一个页面有两个组件,其中组件A的数据可以传递到组件B,同理组件B的数据可以传递到组件A, 即AB两个组件可以互相传递 ...

vue路由参数改变，组件数据没重新更新问题

vue路由参数改变，组件数据没重新更新问题相关推荐

最新文章

热门文章