一、this.$router.push
不带参数跳转
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
携带参数跳转
1.使用query传参,使用this.$route.query.id接受参数
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
2.使用params传参,路径只能使用name,使用this.$route.params.id接受参数
this.$router.push({name:'home',params: {id:'1'}})
this.$router.push会向history中添加新的记录,可以使用this.$router.go(-1)回到上一个页面;在使用query传参时,参数会暴露在地址栏中,页面会保留参数可以刷新,使用params传参时,参数不会显示在地址栏中,但只有首次进入参数才能拿到,刷新后参数丢失,想要保留参数需要在路由地址中配置 path: "/home/:id"
二、this.$router.replace
this.$router.replace使用方式与this.$router.push基本一致,只是this.$router.replace不会在history中添加记录,而是替换掉history的记录,无法通过浏览器的返回功能回到上一个页面,一般用来在登出系统时使用
三、this.$router.go(n)
向前或向后跳转n个页面,n可以为正整数或负整数,一般用this.$router.go(-1)来返回上一个页面
四、this.$router.resolve
用来在浏览器新标签页打开页面,传参方式与push一致