Vue router重定向redirect如何傳值問(wèn)題

更新時(shí)間：2023年10月23日 16:44:57 作者：352328759

這篇文章主要介紹了Vue router重定向redirect如何傳值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue router重定向redirect如何傳值

配置 vue_router 時(shí), 很經(jīng)常就用到重定向(redirect)功能

例如：

沒登錄重定向到登錄頁(yè)面(導(dǎo)航衛(wèi)士攔截也是高效的登錄檢查方法)

index, home, house 重定向到首頁(yè)等

重定向 redirect 可接受的值

字符串

字符串作為 path 傳入, 相當(dāng)于 { path: redirect }

{
	...
	redirect: "/assets/assetsIndex",
	...
}
// 相當(dāng)于
{
	...
	redirect: { path: '/assets/assetsIndex' },
	...
}

對(duì)象

先判斷有沒有 name

有 name

發(fā)起跳轉(zhuǎn)處提供的 name, query, hash, params 會(huì)往下傳

如果 redirect 也提供了這些屬性則用 redirect 提供的往下傳

redirect: {
	name: 'assetsIndex',
	params: { id: 'redirect' },
}
// redirect 提供了 params, 目標(biāo)組件可以收到該 params 數(shù)據(jù)
// redirect 沒有提供, 目標(biāo)組件收到發(fā)起跳轉(zhuǎn)處的數(shù)據(jù)(發(fā)起跳轉(zhuǎn)是有數(shù)據(jù)的話)

沒有 name, 就找 path

計(jì)算后的 path 和 query, hash 會(huì)往下傳

如果 redirect 也提供了這些屬性則用 redirect 提供的往下傳

redirect: {
	path: 'assetsIndex',
	query: { id: 'redirect' },
}

方法

方法必須 return 一個(gè)字符串

return 的內(nèi)容最終作為 path 往下傳

所以提供的 params 將無(wú)效

redirect: function (to) {
	return 'assetsIndex'
}

這些不需要傳參的情況, 直接設(shè)置為目標(biāo)地址的字符串就可以

{
	path: "/assets",
	component: layout,
	redirect: "/assets/assetsIndex",
}

如果你遇到的需求需要傳值的話, 可以參考下面的方法

query 帶參跳轉(zhuǎn)

query 直接帶參就可以了, 缺點(diǎn)是地址中會(huì)暴露參數(shù)

// 發(fā)起跳轉(zhuǎn)
this.$router.push({ name: 'assets', query: { val: 'val值' } })
/* or */
this.$router.push({ path: '/assets', query: { id: '編程式_id' } })
/* or */
this.$router.push("/assets?id=編程式_id")

// 重定向
{
	path: "/assets",
	name: "assets",
	redirect: "/assetsHome",
}

// 目標(biāo)路由
{
	path: "/assetsHome",
	component: assetsHome,
},

// 目標(biāo)組件中取值
this.$route.query

params 帶參跳轉(zhuǎn)

params 帶參相對(duì)麻煩, 因?yàn)?quot;如果提供了 path，params 會(huì)被忽略"在 redirect 中也是成立的

所以我們可以知道, 不可以用 path 來(lái)設(shè)置路由

而 params 帶參的好處當(dāng)然就是可以在地址隱藏參數(shù)了

// 發(fā)起跳轉(zhuǎn)
this.$router.push({ name: 'assets', params: { id: '編程式_id' } })

// 重定向
{
	path: "/assets",
	name: "assets",
	redirect: { name: 'assetsHome' },
}

// 目標(biāo)路由
{
	path: "/assetsHome",
	name: "assetsHome",
	component: assetsHome,
}

// 目標(biāo)組件中取值
this.$route.params

動(dòng)態(tài)路徑帶參跳轉(zhuǎn)

本來(lái)是不想寫這個(gè)方法的, 因?yàn)楣P者本來(lái)就很討厭動(dòng)態(tài)路徑帶參, 覺得那個(gè)方法局限性太大, 加一個(gè)參數(shù)很麻煩, 還要順序要求

為了不要被讀者吐槽我懶(敲代碼本來(lái)就是為了偷懶嘛), 還是稍微寫一下

// 發(fā)起跳轉(zhuǎn)
this.$router.push({ path: '/assets/編程式_id' })

// 重定向
{
	path: "/assets/:id",
	name: "assets",
	redirect: { name: 'assetsHome' },
}

// 目標(biāo)路由
{
	path: "/assetsHome/:id",
	name: "assetsHome",
	component: assetsHome,
}

// 目標(biāo)組件中取值
this.$route.params