前言：编程式路由在我们的项目使用过程中最常用的的方法了。
GitHub：https://github.com/Ewall1106/mall
基本概念
- 什么是编程式路由呢？就是通过借助
router的实例方法，通过编写代码来实现页面的跳转。
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
- 在 vue 实例内部，你可以通过
$router访问路由实例。因此你可以调用this.$router.push。
路由导航
- 还是在
test.vue组件里面写个div并给它添加一个click跳转事件：
div上添加一个click点击事件
- 在
view文件下新建一个goods.vue
goods.vue
- 在
router中引入这个goods组件
路由
- 打开路径为
test的页面并点击
localhost
- ok，点一下我们就到
goods页面了，实现了跟router-view标签一样的效果。
goods页面
- 到这里我们已经实现了编程式路由的跳转了，接下来我们来试试路由携带参数跳转及接收参数。
路由传参
-
$router.push({path: 'name?a=123'})或者$router.push({path: 'name',query:{a:123}})这两种方式都可以。
路由跳转并携带参数
- 在
goods.vue中输入 - 提醒一句，这里的获取上一级页面传过来的参数是
$route.query.goodsId，是$route不是$router（没有r）。
goods.vue
- 然后就可以看到页面中显示上级页面传过来的参数了：
localhost
goods.vue
返回上级
- 这个就随意提一下，就是类似于
history.go()的方法，括号里面填个1就是前进一级页面，-1就后退一级页面。
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)
