路由傳參的方式

傳參方式可劃分為 params 傳參和 query 傳參，而 params 傳參又可分為在url 中顯示參數和不顯示參數兩種方式，這就是vue路由傳參的三種方式。

傳參又分為聲明式和編程式

方式一params（url顯示參數）

聲明式router-link

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

編程式this.$router.push

// 子路由配置
{
    path:'/child/:id',
    component:Child
}
// 父路由傳參（一般通過事件觸發）
this.$router.push({
    path:`/child/${id}`
})

方式二params(url不顯示參數)

這種利用 params 不顯示 url 傳參的方式會導致在刷新頁面的時候，傳遞的值會丟失

聲明式router-link

// 子路由配置
{
    path:'/child/:id',
    name:'Child',
    component:Child
}
// 父組件
<router-link :to="{name:'Child',params:{id:123}}">導航進入子路由</router-link>

編程式this.$router.push

// 子路由配置
{
    path:'/child/:id',
    name:'Child',
    component:Child
}
// 父路由傳參（一般通過事件觸發）
this.$router.push({
    name:'Child',
    params:{
        id:123
    }
})

方式三query（url顯示參數）

聲明式router-link

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

編程式this.$router.push

// 子路由配置
{
    path:'/child/:id',
    name:'Child',
    component:Child
}
// 父路由傳參（一般通過事件觸發）
this.$router.push({
    name:'Child',
    query:{
        id:123
    }
})
// id拼接
this.$router.push(路徑+？id)

得到路由參數

用params通過this.$route.params獲得

用query通過this.$route.query獲得

總結：url不顯示傳參雖然得到了安全性的提升，但也存在缺陷刷新頁面的時候，傳遞的值會丟失。普遍還是用id拼接的方法，得到路徑傳過來的參數也不會丟失。

params動態路由傳參
 //子路由配置
path:'/child/:id'

// 傳參
this.$router.push({path:`/child/${id}`})


query id拼接傳參
// 子路由配置
path:'/child'

//傳參
this.$router.push(`/detail?id=${id}`)