快捷導(dǎo)航

vue路由跳轉(zhuǎn)攜帶參數(shù)的方式總結(jié)

更新時間：2022年10月17日 08:59:26 作者：糖糖246

我們知道在vue中每個頁面都需要在路由中聲明,下面這篇文章主要給大家介紹了關(guān)于vue路由跳轉(zhuǎn)攜帶參數(shù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、<router-link> 方式跳轉(zhuǎn)

1. 攜帶query參數(shù)

 <router-link to="/detail?id=001&title=消息001"> 消息001</router-link>

<router-link :to="{
        name: 'detail',
        path: '/detail', 
        query: {
                id: '001',
                title: '消息001'
        }
}"

注：此種方式不需要動路由配置，to屬性對象形式中name和path二選一即可。

此時瀏覽器地址欄地址為：http://localhost:8080/detail?id=001&title=消息001

接收參數(shù)為：

$route.query.xxx

2. 攜帶params參數(shù)

<router-link :to="`/detail/${id}/${title}`"> {{ title }} </router-link>

<router-link :to="{
? ? ? ? name: 'detail',
? ? ? ? path: '/detail',
? ? ? ? params: {
? ? ? ? ? ? ? ? id: '001',
? ? ? ? ? ? ? ? title: '消息001'
? ? ? ? }
}"

注意：此種方式需要修改路由配置，且to的對象形式中只能用name匹配路由

{
? ? ? ?name: 'detail',
? ? ? ? path: '/detail/:id/:title'
? ? ? ? component: Detail
}?

此時瀏覽器地址欄地址為：http://localhost:8080/detail/001/消息001

接收參數(shù)為：

$route.params.xxx

3.將參數(shù)轉(zhuǎn)換為props屬性

我們可以通過配置路由時的props屬性，將params/query攜帶的參數(shù)，在組件中用props屬性來接收，這樣用時可以直接使用，就不需要$route.params.xxx/$route.query.xxx的形式了

配置方式：

{
    name:'detail',
    path:'/detail',
    component: Detail,
 
    /**
    方式一，值為對象，對象中的key-value會以props的形式傳遞給Detail組件，
    但是傳遞的值都是一樣的，不推薦
    props: {
         id: '123',
         title: '消息001',
    },
    **/
 
    /**
    方式二，值為布爾值，若布爾值為真，就會把該組件收到的所有params參數(shù)，以props的形式傳式傳遞給Detail組件， 但之這種方式只適用于params參數(shù)
    props: true,
    **/
 
    /**
    方式三，值為函數(shù)，內(nèi)置傳參$route，可以使用結(jié)構(gòu)賦值形式
    **/
    props({query}){
        return {id: query.id, title: query.title}
    },

還學(xué)到了一種結(jié)構(gòu)再結(jié)構(gòu)的形式

props({ query: { id, title } }) {
? ? ? ? return { id, title }

二、編程方式跳轉(zhuǎn)路由

通過編寫代碼的方式使路由發(fā)生跳轉(zhuǎn)，跳轉(zhuǎn)方式有兩種，一種是push，一種是replace，他們都是$router上的函數(shù)（存在于VueRouter原型上）。此時攜帶參數(shù)方式為：

this.$router.push({
    name:  'detail',
    params: {
        id: xxx,
        title: xxx
    },
    /**
    query: {
        id: xxx,
        title: xxx
    }
    **/
})
 
this.$router.replace({
    name:  'detail',
    params: {
        id: xxx,
        title: xxx
    },
    /**
    query: {
        id: xxx,
        title: xxx
    }
    **/
})

注意：不論何種方式跳轉(zhuǎn)，想要在標(biāo)簽中接收到不同的params就需要在路由配置時用/:占位，不然只能接收到第一次打開時帶過來的參數(shù)。