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

最新推荐文章于 2025-10-28 14:16:20 发布

原创最新推荐文章于 2025-10-28 14:16:20 发布 · 3.5k 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细介绍了VueRouter中如何使用`<router-link>`和相关API（push,replace,go）进行页面跳转，包括路径参数、params和query的传递，以及push和replace对历史栈的不同操作。

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

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

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

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

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

整体思路与<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跳转的写法和含义与push一模一样（不再赘述）
replace与push的区别在于对histroy栈的操作不一样，push是压入栈新的页面，replace则是用新页面替代栈中当前的页面。


this.$router.go(-1);  // 在浏览器记录中后退一步记录，等同于 history.back()
this.$router.go(1);   // 在浏览器记录中前进一步，等同于 history.forward()