Vue路由传参

vue路由传参分为params和query传参两种

一：params传参

         方式一：显示参数（声明式）：<router-link>

//子路由配置
{
  path: '/child/:id',
  component: Child
}
//父路由组件
<router-link :to="/child/123">进入Child路由</router-link>

       方式二：显示参数(编程式）：this.$router.push

//子路由配置
{
  path: '/child/:id',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    path:'/child/${id}',
})
//子路由获取传递的参数：
this.$route.params.id

     方式三：不显示参数（声明式）：<router-link>

<router-link :to="{name:'Child',params:{id:123}}">进入Child路由</router-link>

      方式四：不显示参数（编程式）：this.$router.push

                不能再使用 :/id 来传递参数了，因为父路由中，已经使用 params 来携带参数了

//子路由配置
{
  path: '/child,
  name: 'Child',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    name:'Child',
    params:{
    	id:123
    }
})

二、query 传参

               声明式：router-link

        该方法子路由提前配置好路由别名（name 属性）

//子路由配置
{
  path: '/child,
  name: 'Child',
  component: Child
}
//父路由组件
<router-link :to="{name:'Child',query:{id:123}}">进入Child路由</router-link>

                编程时：this.$router.push

        

//子路由配置
{
  path: '/child,
  name: 'Child',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    name:'Child',
    query:{
    	id:123
    }
})
//子路由接受参数
this.$route.query.id

同样需要子路由提前配置好路由别名（name 属性）