vue 路由跳轉四種方式 帶引數

2022-06-24 05:51:08 字數 1543 閱讀 9976

1

. 不帶引數 "

">

""> //

name,path都行, 建議用name //2

.帶引數 "

}">

//params傳引數 (類似post)

//路由配置 path: "/home/:id" 或者 path: "/home:id"

//不配置path ,第一次可請求,重新整理頁面id會消失

//配置path,重新整理頁面id會保留

//html 取參 $route.params.id

//script 取參 this.$route.params.id"}

">

//query傳引數 (類似get,url後面會顯示引數)

//路由可不配置

//html 取參 $route.query.id

//script 取參 this.$route.query.id

1

. 不帶引數

this.$router.push('

/home')

this.$router.push()

this.$router.push()

2. query傳參

this.$router.push(})

this.$router.push(})

//html 取參 $route.query.id

//script 取參 this.$route.query.id

3. params傳參

this.$router.push(}) //

只能用 name //

路由配置 path: "/home/:id" 或者 path: "/home:id" ,

//不配置path ,第一次可請求,重新整理頁面id會消失

//配置path,重新整理頁面id會保留

//html 取參 $route.params.id

//script 取參 this.$route.params.id

4. query和params區別

query類似

get, 跳轉之後頁面 url後面會拼接引數,類似?id=1

, 非重要性的可以這樣傳, 密碼之類還是用params重新整理頁面id還在

params類似 post, 跳轉之後頁面 url後面不會拼接引數 , 但是重新整理頁面id 會消失

this.$router.go(n)

向前或者向後跳轉n個頁面,n可為正整數或負整數

ps : 區別

this.$router.push

跳轉到指定url路徑,並想history棧中新增乙個記錄,點選後退會返回到上乙個頁面

this.$router.replace

跳轉到指定url路徑,但是history棧中不會有記錄,點選返回會跳轉到上上個頁面 (就是直接替換了當前頁面)

this.$router.go(n)

向前或者向後跳轉n個頁面,n可為正整數或負整數

Vue路由帶引數跳轉

path 是要跳轉的路由路徑 推薦換成 name 值,name pathname 命名路由,兩者都可以進行路由導航 params 是要傳送的引數,引數可以直接 key value 形式傳遞 類似post query 是通過 url 來傳遞引數的同樣是 key value 形式傳遞 類似get 重新整...

Vue Vue router路由帶引數跳轉

1.newscontainer.vue 2.router.js 1.匯入vue router import vuerouter from vue router 2.手動安裝 vuerouter import homecontainer from components tabbar homeconta...

react 路由跳轉帶引數

1.比較常用的就是修改路由配置在path type 這種型別 這種型別的主要是詳情頁面等不在一級顯示的頁面中使用。2.第二種使用query 來實現,首先引入 import from react router dom 然後在需要跳轉的地方新增 其中query 就是我們需要傳遞的引數了 在我們跳轉的頁面...