最近一段時間在用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，發現道路還很遠，仍需努力。。。