關於vue路由跳轉頁面帶參數方法總結

由於最近項目有這樣一個需求：在首頁導航欄顯示消息數，點擊每一條未讀消息帶着參數跳轉到相應頁面進行顯示，網上查了好些辦法，好比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 方法實現了a頁面跳轉帶參顯示在組件b中,須要注意的是此方法與watch,methods同級，且頁面還未加載因此不能用this,具體用法能夠百度下。

與這個方法相關的方法也能夠百度瞭解下，很是實用：

 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
}