1. 方式一：使用router-link標(biāo)簽 

1.1 params 傳參

首先定義好路由

const routes = [
    { path :  ‘/home' , component : () => import(‘/../views/home.vue') } ,
    { path :  ‘/about/:id' , name : 'about' , component: () => import(‘/../views/about.vue') } 
]

在需要跳轉(zhuǎn)的home組件中使用 router-link 標(biāo)簽

<router-link :to=”{ name : 'about' , params : { id : 1} }”>跳轉(zhuǎn)</router-link>

在跳轉(zhuǎn)到的about組件中拿到傳過(guò)來(lái)的值

this.$route.params.id

小結(jié)：params傳參類(lèi)似post，路由配置可以為 path : '/about/ : id’或  path : '/about : id’。

注意：如果不配置path的路由地址 :id ，那么第一次發(fā)起請(qǐng)求時(shí)可以拿到傳過(guò)來(lái)的值，但是刷新之后id會(huì)消失；配置了path后刷新頁(yè)面id會(huì)保留。

1.2 query傳參

首先定義好路由

const routes = [
    { path :  ‘/home' , component : () => import(‘/../views/home.vue') } ,
    { path :  ‘/about' , name : 'about' , component: () => import(‘/../views/about.vue') } 
]

在需要跳轉(zhuǎn)的home組件中使用 router-link 標(biāo)簽

<router-link :to=”{ name : 'about' , query: { id : 1} }”>跳轉(zhuǎn)</router-link>

在跳轉(zhuǎn)到的about組件中拿到傳過(guò)來(lái)的值

this.$route.query.id

小結(jié)：query傳參類(lèi)似于get，在url末尾會(huì)顯示傳過(guò)來(lái)的參數(shù)，路由地址可不配置。

注意：如果是html取參，用$route.query.id；如果是script取參，用this.$route.query.id。

總結(jié)：如果使用params傳參，要在path中配置好路由地址，不然頁(yè)面刷新后傳過(guò)來(lái)的參數(shù)會(huì)丟失；如果使用query傳參，則無(wú)需再path中配置路由地址，頁(yè)面跳轉(zhuǎn)后刷新也不會(huì)丟失參數(shù)。

2. 方式二：使用button按鈕和點(diǎn)擊時(shí)間@click

2.1 params 傳參

首先定義好路由

const routes = [
    { path :  ‘/home' , component : () => import(‘/../views/home.vue') } ,
    { path :  ‘/about/:id' , name : 'about' , component: () => import(‘/../views/about.vue') } 
]

在需要跳轉(zhuǎn)的home組件中添加一個(gè)button按鈕，并增加點(diǎn)擊事件

<button @click=”change”>跳轉(zhuǎn)</button>

在change方法中使用this.$router.push進(jìn)行頁(yè)面跳轉(zhuǎn)

change(){
    this.$router.push({
        name : “about” , 
        params : {id : 1}
    })
}

在about組件中拿到傳過(guò)來(lái)的值

this.$route.params.id

小結(jié)：和使用router-link標(biāo)簽類(lèi)似，使用params就類(lèi)似于post方法，需要配置好路由地址:id，才不會(huì)在刷新頁(yè)面后丟失數(shù)據(jù)。

2.2 query傳參

首先定義好路由

const routes = [
    { path :  ‘/home' , component : () => import(‘/../views/home.vue') } ,
    { path :  ‘/about' , name : 'about' , component: () => import(‘/../views/about.vue') } 
]

在需要跳轉(zhuǎn)的home組件中添加一個(gè)button按鈕，并增加點(diǎn)擊事件

<button @click=”change”>跳轉(zhuǎn)</button>

在change方法中使用this.$router.push進(jìn)行頁(yè)面跳轉(zhuǎn)

change(){
    this.$router.push({
        name : “about” , 
        query: {id : 1}
    })
}

或者：

change(){
    this.$router.push({
        path: “/about” , 
        query: {id : 1}
    })
}

在about組件中拿到傳過(guò)來(lái)的值

this.$route.query.id

小結(jié)：和使用router-link標(biāo)簽類(lèi)似，使用query就類(lèi)似于get方法，不需要配置好路由地址:id，刷新頁(yè)面后數(shù)據(jù)也不會(huì)丟失。

總結(jié)：如果使用params傳參，要在path中配置好路由地址，不然頁(yè)面刷新后傳過(guò)來(lái)的參數(shù)會(huì)丟失；如果使用query傳參，則無(wú)需再path中配置路由地址，頁(yè)面跳轉(zhuǎn)后刷新也不會(huì)丟失參數(shù)。

到此這篇關(guān)于Vue中路由傳參的實(shí)用方式 分享的文章就介紹到這了,更多相關(guān)Vue路由傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論