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組件中拿到傳過來的值

this.$route.params.id

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

注意：如果不配置path的路由地址 :id ，那么第一次發(fā)起請求時可以拿到傳過來的值，但是刷新之后id會消失；配置了path后刷新頁面id會保留。

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組件中拿到傳過來的值

this.$route.query.id

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

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

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

2. 方式二：使用button按鈕和點(diǎn)擊時間@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組件中添加一個button按鈕，并增加點(diǎn)擊事件

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

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

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

在about組件中拿到傳過來的值

this.$route.params.id

小結(jié)：和使用router-link標(biāo)簽類似，使用params就類似于post方法，需要配置好路由地址:id，才不會在刷新頁面后丟失數(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組件中添加一個button按鈕，并增加點(diǎn)擊事件

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

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

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

或者：

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

在about組件中拿到傳過來的值

this.$route.query.id

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

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

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

最新評論