一、vue-router路由傳參問題

1、概念：

A、vue 路由傳參的使用場(chǎng)景一般應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí)，攜帶參數(shù)跳轉(zhuǎn)。
B、傳參方式可劃分為 params 傳參和 query 傳參；
C、而 params 傳參又可分為在 url 中顯示參數(shù)和不顯示參數(shù)兩種方式；
D、即vue路由傳參的三種方式：query傳參（顯示參數(shù)）、params傳參（顯示參數(shù)）、params傳參（不顯示參數(shù)）

2、常見場(chǎng)景：

A、點(diǎn)擊列表詳情，跳轉(zhuǎn)到詳情內(nèi)頁，傳遞id參數(shù)獲取詳情數(shù)據(jù)。
B、在輸入框輸入內(nèi)容后，點(diǎn)擊搜索，跳轉(zhuǎn)到搜索頁面，并把輸入的內(nèi)容一起帶到搜索頁面

方式一：query傳參（顯示參數(shù)）

query 傳參（顯示參數(shù)）可分為 聲明式 和 編程式 兩種方式

1、聲明式 router-link

該方式也是通過 router-link 組件的 to 屬性實(shí)現(xiàn)，不過使用該方式傳值的時(shí)候，需要子路由提前配置好路由別名 （name 屬性），例如：

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

2、編程式 this.$router.push

使用該方式傳值的時(shí)候，同樣需要子路由提前配置好路由別名 （name 屬性），例如：

//子路由配置
{
  path: '/child,
  name: 'Child',
  component: Child
}
//父路由編程式傳參(一般通過事件觸發(fā))
this.$router.push({
    name:'Child',
    query:{
    	id:123
    }
})
復(fù)制代碼

接收參數(shù)：在子路由中可以通過下面代碼來獲取傳遞的參數(shù)值

this.$route.query
console.log( this.$route.query ) // { id:123 }
console.log( this.$route.query.id ) // 123

方式二：params傳參（顯示參數(shù)）

params 傳參（顯示參數(shù)）又可分為 聲明式 和 編程式 兩種方式

1、聲明式 router-link

該方式是通過 router-link 組件的 to 屬性實(shí)現(xiàn)，該方法的參數(shù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對(duì)象。使用該方式傳值的時(shí)候，需要子路由提前配置好參數(shù)，例如：

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

2、編程式 this.$router.push

使用該方式傳值的時(shí)候，同樣需要子路由提前配置好參數(shù)，例如：

//子路由配置
{
  path: '/child/:id',
  component: Child
}
//父路由編程式傳參(一般通過事件觸發(fā))
this.$router.push({
    path:`/child/${id}`, // 模板字符串形式
})

接收參數(shù)：在子路由中可以通過下面代碼來獲取傳遞的參數(shù)值

this.$route.params.id
console.log( this.$route.params ) // { id:123 }
console.log( this.$route.params.id ) // 123

方式三：params傳參（不顯示參數(shù)）

params傳參（不顯示參數(shù)）也可分為 聲明式 和 編程式 兩種方式，與方式一不同的是，這里是通過路由的別名 name 進(jìn)行傳值的

1、聲明式router-link

該方式也是通過 router-link 組件的 to 屬性實(shí)現(xiàn)，例如：

<router-link :to="{name:'Child',params:{id:123}}">進(jìn)入Child路由</router-link>

2、編程式this.$router.push

使用該方式傳值的時(shí)候，同樣需要子路由提前配置好參數(shù)，不過不能再使用 :/id 來傳遞參數(shù)了，因?yàn)楦嘎酚芍?，已?jīng)使用params來攜帶參數(shù)了，例如：

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

接收參數(shù)：在子路由中可以通過下面代碼來獲取傳遞的參數(shù)值

this.$route.params.id
console.log( this.$route.params ) // { id:123 }
console.log( this.$route.params.id ) // 123

二、params傳參與query傳參區(qū)別：

• 1.使用query傳參，類似于get請(qǐng)求；使用params傳參，類似于post請(qǐng)求。
• 2.query的語法用于path編寫的傳參地址，也可用于name編寫的傳參地址；params的語法必須用于name編寫的傳參地址
• 3.query傳遞顯示參數(shù)，刷新頁面，參數(shù)不丟失；params傳遞不顯示參數(shù)，刷新頁面，參數(shù)丟失；params相對(duì)于query來說較安全一點(diǎn)

以上就是vue-router路由傳參的兩種方式詳解(params和query)的詳細(xì)內(nèi)容，更多關(guān)于vue-router路由傳參方式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論