Vue router重定向redirect如何傳值問題

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

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

Vue router重定向redirect如何傳值

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

例如：

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

index, home, house 重定向到首頁等

重定向 redirect 可接受的值

字符串

字符串作為 path 傳入, 相當于 { path: redirect }

{
	...
	redirect: "/assets/assetsIndex",
	...
}
// 相當于
{
	...
	redirect: { path: '/assets/assetsIndex' },
	...
}

對象

先判斷有沒有 name

有 name

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

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

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

沒有 name, 就找 path

計算后的 path 和 query, hash 會往下傳

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

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

方法

方法必須 return 一個字符串

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

所以提供的 params 將無效

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

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

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

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

query 帶參跳轉(zhuǎn)

query 直接帶參就可以了, 缺點是地址中會暴露參數(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",
}

// 目標路由
{
	path: "/assetsHome",
	component: assetsHome,
},

// 目標組件中取值
this.$route.query

params 帶參跳轉(zhuǎn)

params 帶參相對麻煩, 因為"如果提供了 path，params 會被忽略"在 redirect 中也是成立的

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

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

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

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

// 目標路由
{
	path: "/assetsHome",
	name: "assetsHome",
	component: assetsHome,
}

// 目標組件中取值
this.$route.params

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

本來是不想寫這個方法的, 因為筆者本來就很討厭動態(tài)路徑帶參, 覺得那個方法局限性太大, 加一個參數(shù)很麻煩, 還要順序要求

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

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

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

// 目標路由
{
	path: "/assetsHome/:id",
	name: "assetsHome",
	component: assetsHome,
}

// 目標組件中取值
this.$route.params