vue页面路由跳转的方式

172 阅读1分钟

一般跳转页面带参数可以有两种方式。使用query或者params携带,这两种区别就是query在参数会在网站中显示,类似get,而params类似post不会在网站显示,并且params需要在路由中配置,否则刷新之后参数后消失,query刷新后参数会保留

在页面读取参数,用query传,this.router.query读取,用params传,this.router.query读取,用params传,this.router.params读取

1.this.$route.push

这种跳转方式在函数中使用

不带参数

1.this.$route.push({path:'/home'})
2.this.$route.push({name:'home'})   

带参数

只能使用name跳转

1.this.route.push({name:'home',params:{id:2}})

需要在路由中配置 { name:'home' path:'/home:id' complate:home }

页面读取参数 this.$router.params.id

2.his.$route.replace

和上面差不多,区别就是this.$route.push会向history添加记录,而erplate不会,相当于替换当前页面,不能返回之前页面

3.this.$route.go(n)

跳转n个页面,比如返回上一页,this.route.go(-1)

4.router-link

在html页面中使用

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

假如不带/,就表示从当前页面开始