[JavaScript知识库]vue的几种路由跳转方式

vue跳转有总体分为带参跳转和不带参跳转；
带参又有路由显示和不显示的差别

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({name:"/register",query:{setid:123456}})

//带参跳转 路由不显示
this.$router.push({name:"/register",params:{setid:123456}})

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})