目录
入门
router-link
使用自定义组件来创建链接，而不是使用常规a标签。不重新加载页面的情况下更改 URL，处理 URL 生成及其编码。
相当于带有 href 属性的 a 标签，但是页面不会进行跳转。
<router-link to="/home">Home</router-link>to里的是hash地址（要跳转的地址），当单击router-link时，改变了地址的hash值
router-view
路由的出口，将路由匹配到的组件全部渲染到这里
配置路由实例
在router/index.js里操作
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/home',
name: 'home',
component: HomeView
}
]先导入组件，就是第一行代码
- path 与 router-link 里的 to 值保持一致，就是路由的地址
- name 是你自定义的值，给路由命名，name值唯一
- component 的值是需要显示的组件，要与导入的名字（代码第一行蓝色的HomeView）保持一致
在上一步单击① router-link ，改变了地址的hash值之后， ② vue 检查 hash 变化，遍历路由的配置，发现 pat h与 hash 匹配，就③ 把对应的 component 页面放入 router-view 组件里面
路由传参
index.js:
const routes = [
{
path: '/home/:id',
name: 'home',
component: HomeView
}
]冒号之后的是动态字段（类似于形参）
App.vue（有切换的页面）:
<router-link to="/home/:123">Home</router-link>冒号之后的是动态字段（类似于实参），这里的动态字段传给上一步，然后就可以在下一步调用了
HomeView.vue（切换的页面）:
<template>
<p>{{$route.params.id}}</p>
</template> route代表自身组件的路由对象，这里就可以得到123
图示：
编程路由跳转（$router）
- router.back() 返回上一页
- router.go() 历史
参数是数字，表示前进或后退多少页。比如：
router.go(-1) 返回上一页
router.go(1) 前进一页
- router.forward() 前进一页
- router.push() 跳转
会向历史添加一个新的记录。所以，当用户点击浏览器后退按钮的时候，会回到之前的网址。
- router.replace() 替换
替换当前页面，不会向历史添加一个新的记录。所以，当用户点击浏览器后退按钮的时候，不会回到之前的网址。