vue路由傳參問題
阿新 • • 發佈:2022-04-12
1.路由傳遞引數(物件寫法),path是否可以結合params引數一起使用?
this.$router.push({
path: "/search", // 跳轉路徑
params: {keyword: this.keyWord}, // params傳遞引數
query: {k: this.keyWord.toUpperCase()} // query傳遞引數
})
路由跳轉傳參的時候,物件的寫法可以時name
,path
的形式,但是需要注意的是,path
不能與params
引數一起使用
1.1 路徑會出現問題:需要跳轉的元件名稱並沒有出現
1.2 警告
2.如何指定params引數可傳可不傳?
// 沒有傳遞params引數
this.$router.push({
name: "search",
query: {k: this.keyWord.toUpperCase()}
})
2.1 如果路由要求傳遞params引數,但是並沒有傳遞,URL會有問題
解決方法:配置路由,佔位的時候,在佔位的後面加上一個問號?
?
就代表:params可以傳遞,或者不傳遞
{ name: "search", path: "/search/:keyword?", // 佔位後面新增一個 ? 代表可傳,或者可不穿 component: Search, meta: { show: true } },
沒有問題
3. params引數可以傳遞,也可以不傳遞,但是如果傳遞的是空串,如何解決?
this.$router.push({
name: "search",
params: {keyword: ""}, // 傳遞空串
query: {k: this.keyWord.toUpperCase()}
})
}
依舊是URL的問題:
解決:使用undefined解決:params引數可傳遞,不傳遞(空的字串)
this.$router.push({ name: "search", params: {keyword: "" || undefined}, query: {k: this.keyWord.toUpperCase()} })
雖然引數不會進行傳遞,但是解決了URL的問題