Vue監控路由的應用

問題來源：

我想要實現這樣的一個功能，在同一個vue元件內，根據路由的不同分別呈現出首頁banner或者是搜尋功能

錯誤的解決辦法

我最初希望單純使用

data(){
   return {
     status:this.$route.query.status||0 //0表示在，1表示進行了初步的查詢
   }
 },

當然了，這樣只能在頁面第一次重新整理渲染時生成，隨後當我們呼叫

methods:{
    changeStatus(){
      this.$router.push({path:"/",query:{status:
 
1}})
    } 
  }

的時候status的值並沒有發生變化
我們應當主動監聽路由的變化（事實上最終我細化了元件的粒度，將這兩個功能拆分了）

使用watch

watch: {
  $route: {
 	// val是改變之後的路由，oldVal是改變之前的val
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度觀察監聽
    deep: true
  }
}

如此一來，不僅可以獲取到路由的屬性的值，還可以通過對比新舊url來作出響應操作，比如進行前端監控判斷使用者操作。