?1 <router-link>
2 this.$router.push

? ?跳轉到指定路徑，并將跳轉頁面壓入history棧中，也就是添加了一個頁面記錄。
3 this.$router.replace

? ?跳轉到指定路徑，將history棧中的當前頁面替換為跳轉到的頁面。
4 this.$router.go(n)

? ?在histroy棧中向前或者向后跳轉n個頁面，n可為正整數或負整數。

---

<router-link to>

1.不帶參數

<router-link :to="/home"></router-link><router-link :to="{name:'home'}"></router-link><router-link :to="{path:'/home'}"></router-link>

直接寫路徑或者根據vue-router的配置文件(index.js)，構建一個對象使用name屬性或者path屬性都行, 建議用name。

2.路徑參數(pathvariable)

<router-link to = "/跳轉路徑/傳入的參數"></router-link>

例如：

<router-link :to="`/adddoc/${record.id}`">

to的屬性值是`/adddoc/${record.id}`表達式的計算結果

• 路徑樣式 ????????????????????????/跳轉路徑/傳入的參數??/ebook/1
• 路由index.js配置path? ? ?{path:/ebook/:id,name:ebook,component:Ebook}
• 取參數? ? ? ? ? ? ? ? ? ? ? ? ? ? HTML: $route.params.id (用取值表達式寫在templat中)? ? ? ?
  ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Script: this.$route.params.id (寫在JS代碼中)

3.params傳遞參數(url后面會顯示/value，路徑傳參的另一種寫法)
如果說路徑傳參是純手寫，那么params傳參就是由vue-router幫助構建的路徑傳參

<router-link :to="{name:'home', params: {id:10001}}"></router-link>
<router-link :to="{name:'adddoc', params: {eid:`${record.id}`}}"></router-link>

• 路徑樣式 ????????/home/10001? ，/adddoc/1
• 路由index.js配置path? ? path:"/home/:id" 或者 path: "/adddoc:eid"??(省略了name和component)路由index.js如果不配置path ,第一次可請求,刷新頁面id會消失；配置path,刷新頁面id會保留。使用params必須要注意的是，params屬性中，傳遞參數使用的參數名稱必須與index.js中path配置的名稱對應上path配置時使用:id,傳遞參數時就要用params:{id:xxx}，配置時使用:eid,傳遞參數時就要用params:{eid:xxx}
• 取參? ? ? ? ? ? ? HTML: $route.params.id??????
  ? ? ? ? ? ? ? ? ? ? ?Script:? this.$route.params.id

4.query傳遞參數(類似get,url后面會顯示 ?name=value)

?<router-link :to="{name:'home', query: {id:10001}}"></router-link><router-link :to="{name:'adddoc', query: {eid:`${record.id}`}}"></router-link>

• ?路徑樣式 ????????/home?=10001? ，/adddoc?eid=1
• ?路由index.js不用做path的額外配置（因為query參數根本就不是路徑的一部分）
• ?取參? ? ? ? ? ? ? ?HTML取出 $route.query.id? ，? $route.query.eid
  ? ? ? ? ? ? ? ? ? ? ? ?Script取出? this.$route.query.id? ，this.$route.query.eid

---

push跳轉

整體思路與<router-link to>是一樣的

1.?不傳參

?this.$router.push('/adddoc');this.$router.push({name:'adddoc'});this.$router.push({path:'/adddoc'});

2. 路徑傳參

?this.$router.push('/adddoc/21');

• ?需要在router index.js中進行路徑配置，配置方式與<router-link to>的路徑傳參方式一樣? ?path:/adddoc:eid (省略了name和component)
• ?取參的方式與<router-link to>的路徑傳參方式一樣
  ?HTML: $route.params.eid
  ?Script: this.$route.params.eid

3. params傳參（路徑傳參的另一種寫法）

?this.$router.push({name:'adddoc',params: {eid:'24'}})

push函數中，params只能與name配合使用。使用path會導致白屏（但是沒有異常）

• ?需要在router index.js中進行路徑配置，配置方式與<router-link to>的路徑傳參方式一樣
  ?path:/adddoc:eid name:adddoc component AddDoc
• ?取參的方式與<router-link to>的params取參方式一樣
  ?HTML: $route.params.eid
  ?Script: this.$route.params.eid

4. query傳參

this.$router.push({name:'adddoc',query: {eid:'24'}})
this.$router.push({path:'/adddoc',query: {eid:'24'}})

與<router-link to>的query傳參方式一樣不需要path配置
取參的方式與<router-link to>的params取參方式一樣
HTML: $route.query.eid
script: this.$route.query.eid

---

replace跳轉

replace跳轉的寫法和含義與push一模一樣（不再贅述）
replace與push的區別在于對histroy棧的操作不一樣，push是壓入棧新的頁面，replace則是用新頁面替代棧中當前的頁面。

---

go跳轉

this.$router.go(-1);??// 在瀏覽器記錄中后退一步記錄，等同于 history.back()
this.$router.go(1);???// 在瀏覽器記錄中前進一步，等同于 history.forward()

?