路由傳參的方式-有解無憂

傳參方式可劃分為 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}`)

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500083.html

標籤：其他

上一篇：關于ERP，中臺和低代碼，我的幾點意見

下一篇：常見加密演算法C#實作（一）