vue中路由跳转传参数有多种,自己常用的是下面的几种
通过router-link进行跳转
通过编程导航进行路由跳转

编程导航

1. router-link

<router-link 
    :to="{
        path: 'yourPath', 
        params: { 
            name: 'name', 
            dataObj: data
        },
        query: {
            name: 'name', 
            dataObj: data
        }
    }">
</router-link>
  1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航
  2. params -> 是要传送的参数,参数可以直接key:value形式传递
  3. query -> 是通过 url 来传递参数的同样是key:value形式传递

// 2,3两点皆可传递

2.$router

// 组件 a
<template>
    <button @click="sendParams">传递</button>
</template>
<script>
  export default {
    name: '',
    data () {
    },
    methods: {
      sendParams () {
         let imgPath =e.target.attributes[1].value;
         this.$router.push({ name: 'details', params: { imgPath }});//name:要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找
      }
    }
  }
</script>



// 组件b
<template>
    <h3>{{msg}}</h3>
</template>
<script>
  export default {
    name: '',
    data () {
      return {
        msg: ''
      }
    },
    beforeMount:function(){
            //接收参数
            console.log(this.$route.params);
            this.msg = this.$route.params.imgPath
        }  
  }
</script>

更多的可见VUE ROUTER


扫描二维码,在手机上阅读!