因為最近專案有這樣一個需求：在首頁導航欄顯示訊息數，點選每一條未讀訊息帶著引數跳轉到相應頁面進行顯示，網上查了好些辦法，比如a元件跳轉到b元件：

對於a元件有幾種方式：

1.純頁面跳轉

<template>
<div>
  <router-link 
    :to="{
          path: '你要跳轉的路由', 
          params: { 
              name: 'name',  // params為傳送的引數，name為router.js裡為頁面配置的name
              data: data
          },
          query: {
              name: 'name', //query和params也是傳送的引數，區別在於query會在路徑上顯示引數
              data: data
          }
        }">
   </router-link> 
  </div>
</template>
 

2.通過js控制：

<template>
  <div>
   <button @click="lookDetail()">跳轉</button>
  </div>
</template>

<script>
export default {
  data() {

  },
  methods: {
    lookDetail() {
      this.$router.push({
        path: '',
        name: name, // 要跳轉的路徑的 name,可在 router 資料夾下的 index.js 檔案內找
        params: params
      })
    }
  }
}
</script>
 

對於b元件的監聽：這裡是我遇到坑的地方，本來監聽程式碼是這樣:

watch: {
    '$route': 'getParams'  // 監測路由變化,只要變化了就呼叫getParams
  },

  methods: {
    getParams() {
      const params = this.$route.params.dataobj  // 取到路由帶過來的引數
  }

但是發現第一次跳轉時並沒有監聽到路由變化，而且多次切換路由引數是累加的（使顯示不對），所以查了好多方法，最後在b元件中使用beforeRouteEnter

與這個方法相關的方法也可以百度瞭解下，非常實用：

 beforeRouteUpdate (to, from, next) {

      // 在當前路由改變，但是該元件被複用時呼叫

      // 舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，

      // 由於會渲染同樣的 Foo 元件，因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。

      // 可以訪問元件例項 `this`

    },

    beforeRouteLeave (to, from, next) {

      // 導航離開該元件的對應路由時呼叫

      // 可以訪問元件例項 `this`

    }

對於b元件：

watch(){

},
beforeRouteEnter(to, from, next) {
      next(vm => { // 通過 `vm` 訪問元件例項
        console.log(vm.$route.params)
      })
    },
methods:{
  //your code
}