vue router跳轉方法

2022-09-10 09:09:12 字數 1592 閱讀 9499

router-link

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

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

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.replace() (用法同上,push)

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 router跳轉方法

1.this.router.push 用法 2.this.router.replace 3.this.router.go n 相對於當前頁面向前或向後跳轉多少個頁面,類似window.history.go n n可為正數可為負數。正數返回上乙個頁面 vue router 2.0 常用基礎知識點之ro...

vue router頁面跳轉

vue router的教程位址 我們在建立專案的時候命令列如下 vue init webpack my project cd my project npm install npm run dev最新的專案已經自動安裝了vue router 下面介紹步驟 class tab class tab ite...

vue router頁面跳轉

顯示字段 router link to 導航路徑 使用示例如下 導航 首頁 router link hello hello router link p 實際專案中,很多時候都是通過在js 內部進行導航的跳轉,使用方式如下 this router.push 具體的簡單用法 1 先編寫乙個按鈕,在按鈕上...