最近一段时间在用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){

            //参数id
            url+="?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，发现道路还很远，仍需努力。。。