vue路由跳转总体分为

1. 带参跳转（路由显示和不显示）
2. 不带参跳转

一、声明式路由和编程式路由

1、声明式路由导航

即 router-link

2、编程式路由导航

即写js的方式

1. this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面) ==>> 队列的方式（先进先出）
2. this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面) ==>> 栈的方式（先进后出）
3. this.$router.back(): 请求(返回)上一个记录路由
4. this.$router.go(-1): 请求(返回)上一个记录路由
5. this.$router.go(1): 请求下一个记录路由

二、query和params传参区别

传参可以使用params和query两种方式
params传参只能用name来引入路由
query传递显示参数（url那里），params传递不显示参数，参数在请求体内，params相对于query来说较安全一点
query传值页面刷新数据还在，而params传值页面数据消失

三、路由跳转方式

1、router-link跳转

//不带参数跳转 
<router-link to="/register">
    <span>去这里注册</span> 
</router-link> 

//带参跳转 路由显示 
<router-link :to="{path:'register',query:{setid:123456}}"> 
    <span>去这里注册</span> 
</router-link>

//带参跳转 路由不显示 
<router-link :to="{path:'register',params:{setid:123456}}">
    <span>去这里注册</span> 
</router-link>

2、this.$router.push()

//不带参数跳转
this.$router.push("/register")

//带参跳转 路由显示
this.$router.push({path:"/register",query:{setid:123456}})
//参数取值：
this.$route.query.key

//带参跳转 路由不显示 页面刷新数据丢失
this.$router.push({name:"register",params:{setid:123456}})
//参数取值
this.$route.params.key

3、this.$router.go(1);

// 后退一步记录，等同于 history.back()
this.$router.go(-1);

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

4、this.$router.replace

1. 跳转到指定URL，替换history栈中最后一个记录，点击后退会返回至上上一个页面
   (A----->B----->C 结果B被C替换 A----->C)
2. 设置 replace 属性（默认值: false）的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。即使点击返回按钮也不会回到这个页面
   加上replace: true后，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

//跳转后无法返回到上一页
this.$router.replace("/register") 

//声明式： 
<router-link :to="/register" replace></router-link> 

// 编程式: 
this.$router.replace('/register')

//push方法也可以传replace 
this.$router.push({path: '/register', replace: true})