最近一段时间在用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，发现道路还很远，仍需努力。。。
