本文共 2416 字，大约阅读时间需要 8 分钟。

一,前言

之前说了
   
    设置跳转,
    
     进行路由组件显示这篇介绍vue-router提供可以在js中实现路由跳转的编程式路由导航
    
   

---

二,编程式路由导航介绍

除了使用
   
    创建a标签来定义导航链接，还可以使用router的实例方法，通过编写js代码来实现跳转
   

router.push:

router.push(location, onComplete?, onAbort?)在Vue实例内部，可通过$router访问路由实例,如,this.$router.push作用:使用router.push方法,可导航到不同的URL。router.push方法会向history栈添加一个新的记录，----栈是后进先出当用户点击浏览器后退按钮时，回到之前URL

// 方法的参数可以是一个字符串路径，或者一个描述地址的对象    // 字符串    router.push('home')    // 对象    router.push({ path: 'home' })    // 命名的路由    router.push({ name: 'user', params: { userId: 123 }})    // 带查询参数，变成 /register?plan=private    router.push({ path: 'register', query: { plan: 'private' }})

注意:如果提供了path，params会被忽略

const userId = 123router.push({ name: 'user', params: { userId }}) // -> /user/123router.push({ path: `/user/${userId}` }) // -> /user/123// 这里的 params 不生效router.push({ path: '/user', params: { userId }}) // -> /user

router.push或router.replace中提供onComplete 和onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用如果目标路由和当前路由相同，只有参数改变 如:/users/1 -> /users/2则需要使用beforeRouteUpdate响应这个变化,重新获取用户信息

router.replace:

router.replace(location, onComplete?, onAbort?)作用:不会向history添加新记录，而是替换当前的history记录

router.go(n):

作用:在history记录中向前或者后退多少步，和window.history.go(n)相似

// 在浏览器记录中前进一步，等同于 history.forward()router.go(1)// 后退一步记录，等同于 history.back()router.go(-1)// 前进 3 步记录router.go(3)// 如果 history 记录不够用，那就默默地失败呗router.go(-100)router.go(100)

Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致

---

三,编程式路由导航

在上一篇的代码上做一些修改,用来测试编程式路由导航在商品列表路由组件中,添加对每一个商品详情页面的push和replace

ProductList:

为每个商品添加手动跳转商品详情路由组件的按钮并创建按钮点击事件,使用编程式路由导航实现跳转

在商品页面添加返回按钮:

Product.vue:

---

四,运行程序

1,测试push:

初始页面:

点击商品列表中商品的push按钮,跳转至商品详情 切换商品继续push: 点击返回按钮,返回到 说明push是向history栈添加一个新的记录

2,测试replace:

和push操作相似,初始页面:http://localhost:8080/#/product/productListpush按钮:http://localhost:8080/#/product/productList/detail/1replace按钮:http://localhost:8080/#/product/productList/detail/2返回键:http://localhost:8080/#/product/productList说明push是替换了history栈中的当前记录

---

五,结尾

关于编程式路由导航就简单到这里,下一篇介绍路由守卫