关于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
}