vue中this.$router.push()路由传值和获取的两种常见方法汇总

<template>
	<button @click = "handle">点击跳转</button>
</template>
<script>
    export default{
        methods:{
            handle (){
            //  路径/home对应我在router目录下index.js中定义的path属性值
                this.$router.push('/home');
            }
        }
    }
</script>

export default new Router({
  routes: [
    {
      path: '/home',
      name:'Home',
      component: Home,
    },
 ]
})

//  路径/home对应router目录下index.js中定义的path属性值
this.$router.push('/home');

//  对应router目录下index.js中定义的path
this.$router.push({path:'/home'});

//  对应router目录下index.js中定义的name
this.$router.push({name:'Home'});

// params里面放置的是我们要传递过去的参数
this.$router.push({name:'Home',params:{user:'david'}});

// 带查询参数，传递过去的内容会自动拼接变成/home?user=david
this.$router.push({path:'/home',query:{user:'david'}});

//传参
this.$router.push({name:'Home',params:{user:'david'}});
 
// 在name为Home的组件中接收参数
const id=this.$route.params.id;
console.log(this.$route.params);//打印结果为{user:'david'}

let parObj = JSON.stringify(obj)
// 路由跳转
this.$router.push({
   path:'/detail',
   query:{
       obj:parObj
   }
})
 
// 详情页获取参数
JSON.parse(this.$route.query.obj)

// 路由配置
{
   path:'/detail/:id',
   name:'detail',
   component:Detail,
   props:true  // 如果props设置为true，$route.params将被设置为组件属性  
}
 
// 路由跳转
this.$router.push({
   path:`/detail/${id}`
})
 
// 详情页获取参数
export default {
  props:['id'],  // 将路由中传递的参数id解耦到组件的props属性上
  mounted(){
    console.log("id",this.id);  
  }
}

// 路由配置
{
   path:'/detail',
   name:'detail',
   component:Detail,
   props:true  // 如果props设置为true，$route.params将被设置为组件属性  
}
 
// 路由跳转
this.$router.push({
   name:'detail',
   params:{
       order:{
         id:'123456789',
         name:'商品名称'  
       }
   }
})
 
// 详情页获取参数
export default {
  props:['order'],  // 将路由中传递的参数order解耦到组件的props属性上
  mounted(){
    console.log("order",this.order);  
  }
}