vue跳轉路由

1.  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

2.  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 會消失

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

4.  this.$router.go(n) : 向前或者向後跳轉n個頁面，n可為正整數或負整數

ps : 區別

this.$router.push

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

this.$router.replace

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

this.$router.go(n)

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

補充說明：

$route:路由資訊物件，唯讀物件；

可以獲取路由請求引數 

this.$route.query

this.$route.params

注意點

1、關於帶引數的路由總結如下：

無論是直接路由「path" 還是命名路由「name」，帶查詢引數query，位址列會變成「/url?查詢引數名：查詢引數值「;

直接路由「path" 帶路由引數params params 不生效;

命名路由「name" 帶路由引數params 位址列保持是「/url/路由引數值」;

3、獲取引數方法：

在元件中：  }

在js裡： this.$route.params.color

vue路由跳轉子元件 Vue實現路由跳轉和巢狀

一 配置 router 用 vue cli 建立的初始模板裡面，並沒有 vue router，需要通過 npm 安裝 cnpm i vue router d 安裝完成後，在 src 資料夾下，建立乙個 routers.js 檔案，和 main.js 平級 然後在 router.js 中引入所需的元件...

vue路由跳轉子元件 Vue實現路由跳轉和巢狀

一 配置 router 用 vue cli 建立的初始模板裡面，並沒有 vue router，需要通過 npm 安裝 cnpm i vue router d 安裝完成後，在 src 資料夾下，建立乙個 routers.js 檔案，和 main.js 平級 然後在 router.js 中引入所需的元件...

vue路由跳轉方式

vue路由跳轉方式有四種，具體如下 1 router link 1.1.不帶引數 params傳引數 類似post 路由配置 path home id 或者 path home id 不配置path 第一次可請求,重新整理頁面id會消失，配置path,重新整理頁面id會保留。html取參 route...