1-4 动态路由的传参

一、通过 props 解耦

{
            path:'detail/:id',
            component:import('../views/Detail.vue'),
            props:true
}

二、Detail页面通过props属性接收

export default {
  name: "Detail",
  props:['id']
}

三、动态路由跳转

3-1 router-link跳转

//配置
{
    path: '/detail/:id',
    name: 'detail',
    component: () => import('../views/Detail.vue')
  }
//传变量
<router-link :to="'/detail/'+item.id" tag="button">
     跳转到detail
</router-link>
//接收
this.$route.params

3-2 结合命名路由的使用

<router-link :to="{name:'detail',params:{id:2324}}">detail</router-link>

3-3 $router.push()模式

methods:{
    handleClick(){
      this.$router.push({name:'detail',params:{id:2133}})
    }
}

 methods:{
    handleClick(){
      this.$router.push({path:'/detail/1213'})
    }
  }

methods:{
    handleClick(){
      this.$router.push('/detail/1213')
    }
  }