vue路由跳轉頁面

1. 不帶參數

 1  <router-link :to="{name:'home'}"> 
 2 <router-link :to="{path:'/home'}"> //name,path都行, 建議用name 
 3 // 注意：router-link中連接若是是'/'開始就是從根路由開始，若是開始不帶'/'，則從當前路由開始。
 4  2.帶參數
 5  <router-link :to="{name:'home', params: {id:1}}"> 
 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.id
12 <router-link :to="{name:'home', query: {id:1}}"> 
13 // query傳參數 (相似get,url後面會顯示參數)
14 // 路由可不配置
15 // html 取參 $route.query.id
16 // script 取參 this.$route.query.id

2.  this.$router.push() (函數裏面調用)

 1 1. 不帶參數
 2  this.$router.push('/home')
 3 this.$router.push({name:'home'})
 4 this.$router.push({path:'/home'})
 5 2. query傳參 
 6  this.$router.push({name:'home',query: {id:'1'}})
 7 this.$router.push({path:'/home',query: {id:'1'}})
 8 // html 取參 $route.query.id
 9 // script 取參 this.$route.query.id
10 3. params傳參
11  this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
12  
13 // 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
14 // 不配置path ,第一次可請求,刷新頁面id會消失
15 // 配置path,刷新頁面id會保留
16 // html 取參 $route.params.id
17 // script 取參 this.$route.params.id
18 4. 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可爲正整數或負整數