vue路由跳转

1、router.push(location)=====window.history.pushState

除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。

router.push(location)

想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

当你点击 时,这个方法会在内部调用,所以说,点击 等同于调用 router.push(...)。

声明式:

编程式:router.push(...)

该方法的参数可以是一个字符串路径,或者一个描述地址的对象。

// 字符串

router.push('home')

// 对象

this.$router.push({path: '/login?url=' + this.$route.path});

// 命名的路由

router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数,变成/backend/order?selected=2

this.$router.push({path: '/backend/order', query: {selected: "2"}});

2、router.replace(location)=====window.history.replaceState

跟router.push很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录

3.router.go(n)====window.history.go

// 在浏览器记录中前进一步,等同于 history.forward()

router.go(1)

// 后退一步记录,等同于 history.back()

router.go(-1)

// 前进 3 步记录

router.go(3)

// 如果 history 记录不够用,那就默默地失败呗

router.go(-100)

router.go(100)

你可能感兴趣的:(vue路由跳转)