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文章来源：https://www.toymoban.com/news/detail-663794.html
replace跳转
replace跳转的写法和含义与push一模一样（不再赘述）
replace与push的区别在于对histroy栈的操作不一样，push是压入栈新的页面，replace则是用新页面替代栈中当前的页面。文章来源地址https://www.toymoban.com/news/detail-663794.html
go跳转
this.$router.go(-1); // 在浏览器记录中后退一步记录，等同于 history.back()
this.$router.go(1); // 在浏览器记录中前进一步，等同于 history.forward()
到了这里，关于利用vue-router跳转的几种方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
