分为两种：
一、声明式：
<router-link :to="...">
二、编程式：
router.push(...)
声明式
<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名
一、参数设置：
- 参数to：
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link :to="home">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register
</router-link>
当你点击 <router-link> 时，router.push()方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)
- replace：
设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。
<router-link :to="{ path: '/abc'}" replace></router-link>
- tag：
有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。
<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>
更多参数查看：https://router.vuejs.org/zh/api/#router-link
二、如何获取参数：
//用params传参数 获取值
<p>提示：{{this.$route.params.id}}</p>
//用query传参数 获取值
<p>提示：{{this.$route.query.id}}</p>
三、params 和 query 传参的区别：
1、使用params传参时 参数是不会出现在url的路径上面， 但是在刷新页面时params里面的数据会消失，params只能用name来引入路由
地址栏展现形式http://localhost:8866/todolist
但是如果想要params传参 刷新页面参数不消失，可以在路由中设置对应的参数 地址栏展现形式和query有所区别http://localhost:8866/todolist/123
{
path: '/todolist/:id',
name: 'ToDoList',
component: () => import('../views/todoList.vue')
},
2、query传参时 参数出现在url的路径上面， 刷新页面时query里面的数据不变，而query 要用path或者name引入
地址栏展现形式http://localhost:8866/todolist?id=123
四、router、route区别：
1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等
编程式：
实际情况下，有很多按钮在执行跳转之前，还会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转
一、push方法
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
二、replace方法：
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
router.replace(...)
三、go方法
这个方法的参数是一个整数，意思是在 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)
目标页面获取参数的方法和router-link保持一致。
