一.相关理解
前端路由是组件，后端路由是函数（参考前面node.js）
二.基本路由
要注意的是，app里面只是把展示区的内容占位，其他地方不要动
router，但是在配置之前需要像vuex一样先创建一个router文件夹里面放入我们的index.js文件，来创建一个路由器，专门拿来创建整个网页的路由器，new出来一个路由器过后，我们说一个路由器是管理着多个路由的，所以多个路由直接来个routes，路由又是由key、value组合的，每个路由都是一个配置项，在里面写入键值对
当我们配置好后，路径就会出现一个#
router-link，并且我们的href也就是要跳转的目标也要改为to，而且里面的值不是我们的链接不是我们的目标网页，是我们在url地址中的路径名，所以要记住这里没有./因为不是一个文件
而且你会发现使用了这个最终样式，原来给a写的样式还是有，因为我们的router-link在页面上呈现后就变成了a标签
这个时候active就不能写死了，用到一个规定的属性 active-class，就可以根据我们点的谁active就给谁
最后一步，通过标签router-view指定我们的展示区标签放的位置
1.注意点
另一个组件是被销毁了
叫做路由组件，而且一般是放在一个pages的文件夹下的，我们的要导入要写组件标签的叫做一般组件是放在components里面的
api，一个是$route,一个是$router，值得注意的是，route是每个vc独有的里面的数据是独有的，但是router是共有的，你配置多少个路由都只有这一个router
三.嵌套路由
一级路由，如果是路由下的嵌套路由那就是二级路由了，所以应该在这个路由里面来配置，一个全新的配置项children而且是一个数组，里面写我们的每个路由，这里要注意二级路由之后就不用再带/因为vue帮你解析的时候会给你自动加上
注意二级路由的router-link标签里面的to这个设置，需要连同父级地址写完
四.路由传参（query）
其实没得这么麻烦，这里就定义一个组件就可以搞定
其实这个参数就在我们的$route身上，它上面有一个query专门处理查询字符串的参数的，为什么就能确定是传给我的参数？因为当我们点击了这个之后，他才会呈现他才会有vc实例对象，其他的都被销毁了，所以在我们detail组件就可以把值拿到
两种写法：字符串写法
对象写法
五.命名路由
在我们定义路由的地方给路由取名字，我给我下面的三级路由来个name
只能写在对象写法里面
六.路由传参（params）
最后最大的改变就是我们传进来参数的形式不再是查询字符串了，而是这种类似于在后面还有路径的形式，但是这并不是路径只是参数
注意：如果带的是params参数，这里只能写name路径，不能写path路径
七.路由的props配置
-
方法二：写为一个布尔值，他的意思就是会把这个路由组件收到的所有params参数以props形式给到这个组件
局限性就是只支持params
方法三：为一个函数，参数可以拿到$route,靠的就是这个返回值
方法一：写在路由中的对象，路由中的全新配置项props，这里传的值就是直接给这个路由的组件
但是这种方法使用极少，因为只能传死数据
八.router-link的replace属性
router-link的的操作模式就是push模式，就是一直往栈里面压，也叫压栈，所以当我们当一次后退，指针就会回退一次也就是那个箭头
如何开启replace
这里有一个易错点，加入我给news和message开启了replace，其他都是push当我依次点击About、Home、news和message，主要是replace和push交叉哪一步，当我们点击news时，会干掉前面这一条记录，所以我们的home这条记录就没得了，点击后退直接回到about这一步
九.编程式路由导航
我们的router-link是帮我们实现跳转的功能也就是导航区这一片功能
要实现这个功能需要用到我们$router路由器上面的一个api push
拿下来就没有参数了，记得传参
1.按钮实现前进后退
go，要传入一个数组如果是正数，就表示前进n部，负数表示后退n步
