路由传参的几种方式，普通传参跟动态传参。 以及利用props解藕

路由传参常见的几种方式

$router.push() 普通传参 跟 配置path加props动态传参

一、$router.push()普通传参

1.query属性：值为一个对象 使用$route.query拿到值

this.$router.push({
    
    
  name:name  / path:path
  query:{
    
    
    id:id,
    age:'男'
  }
})   //在组件当中使用 this.$route.query 拿到 {id:id, age:'男'} 对象

2.params属性：值一个对象 但是只能搭配name使用， 使用$route.params拿到值

this.$router.push({
    
    
  name:name  不能使用path:path
  params:{
    
    
    id:id,
    age:'男'
  }
})   //在组件当中使用 this.$route.params 拿到 {id:id, age:'男'} 对象

二、动态传参

1.配置path上拼接:key $router.params.key拿值

const routes=[{
    
     path:'/:id'}]  //配置文件中...
this.$router.push({
    
     path:'/001' }) //跳转文件当中直接输入参数...
this.$route.params.id     //如何获取值...

2.配置添加props属性

const routes=[{
    
     path:'/:id',props:true }] //配置文件中...
this.$router.push({
    
     path:'/001' }) //跳转文件当中直接输入参数...
props：{
    
     id:{
    
    type:Number} }	//在组件当中就可以直接以组件传值的方式来接收，调用时也不会使用到router，也就是所说的解耦
*如果不使用props，获取值时就会使用到router，那么组件就和路由耦合了

*耦合性：就是两对象之间起到了互相依赖的作用，增加了维护的成本

三、compoents vue中自置标签

通过is属性值来灵活决定要使用的组件，值就是你所要使用的那个组件的名称

<components is='who' />		//使用组件
export default {
    
    
  data(){
    
    return {
    
    
    who:'component1'		//定义变量
  }},
  components:{
    
    
    component1:component1,
    component2:component2,     //注册
    component3:component3
  }
}