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({path:"/register",query:{setid:123456}})
​
//带参跳转 路由不显示 页面刷新数据丢失
this.$router.push({name:"register",params:{setid:123456}})

说明：这个常常在方法中使用使用实例如下：

 // 查看日志
 handlerViewLog(row) {
        this.$router.push({ path: '../dgtask/log', query: { jobId: row.id }})
 },

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

参考资料：https:/