vue路由跳轉頁面

2022-03-18 05:02:24 字數 1804 閱讀 1011

1. 不帶引數

1

""> 2"

"> //

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

42.帶引數5"

}"> 6//

params傳引數 (類似post)7//

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

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

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

10//

html 取參 $route.params.id

11//

script 取參 this.$route.params.id12"

}">

13//

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

14//

路由可不配置

15//

html 取參 $route.query.id

16//

script 取參 this.$route.query.id

2.  this.$router.push() (函式裡面呼叫)

1

1. 不帶引數

2this.$router.push('

/home')

3this.$router.push()

4this.$router.push()52

. query傳參

6this.$router.push(})

7this.$router.push(})8//

html 取參 $route.query.id9//

script 取參 this.$route.query.id103

. params傳參

11this.$router.push(}) //

只能用 name

1213

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

14//

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

15//

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

16//

html 取參 $route.params.id

17//

script 取參 this.$route.params.id184

. query和params區別

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

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

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

3.  this.$router.replace() (用法同上,push)

4.  this.$router.go(n) ()

this.$router.go(n)

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

ps : 區別

this.$router.push

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

this.$router.replace

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

this.$router.go(n)

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

Vue路由實現頁面跳轉

在程式 中重新新增乙個log.vue檔案,用來顯示日誌資訊,這時就用到了頁面跳轉。vue檔案之間的跳轉,需要在router裡面配置path,通過路徑跳轉 html檔案如下 to class log btn 日誌router link 在router.js中配置,其中 components pages...

vue多頁面路由跳轉問題

頁面a的執行位址是 http localhost 8080 a.html a是列表頁 頁面 b的執行位址是http localhost 8080 b.html 110 b是從列表頁進入的詳情頁 如果在a頁面裡面寫 click router.push 不管是這樣寫還是 click router.pus...

vue路由以及頁面跳轉的使用

import vue from vue import router from vue router import helloworld from components helloworld import child from components child vue.use router expor...