vue-router 路由跳转

一、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一致