利用vue-router跳转的几种方式

​1
2 this.$router.push

   跳转到指定路径，并将跳转页面压入history栈中，也就是添加了一个页面记录。
3 this.$router.replace

   跳转到指定路径，将history栈中的当前页面替换为跳转到的页面。
4 this.$router.go(n)

   在histroy栈中向前或者向后跳转n个页面，n可为正整数或负整数。

---

1.不带参数

直接写路径或者根据vue-router的配置文件(index.js)，构建一个对象使用name属性或者path属性都行, 建议用name。

2.路径参数(pathvariable)

例如：

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帮助构建的路径传参

• 路径样式         /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)

•  路径样式         /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跳转

整体思路与是一样的

1. 不传参

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

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

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

2. 路径传参

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

•  需要在router index.js中进行路径配置，配置方式与的路径传参方式一样   path:/adddoc:eid (省略了name和component)
•  取参的方式与的路径传参方式一样
   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中进行路径配置，配置方式与的路径传参方式一样
   path:/adddoc:eid name:adddoc component AddDoc
•  取参的方式与的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'}})

与的query传参方式一样不需要path配置
取参的方式与的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()

​