Vue实战047：Breadcrumb面包屑实现导航路径

1、定义路由在routes 配置中，每个路由对象都是一条路由记录，而且路由记录可以是嵌套的，因此当一个路由匹配成功后，他可能匹配多个路由记录，为了进一步确认我们的路由记录，我们可以通过遍历$route.matched来检查路由记录中的 meta 字段，通过定义meta标签来标示该路由指向的内容及权限等问题。

3、CSS样式transition-group的作用为路由切换时添加动画效果，transform: translateX(20px)用来定义路由变形的效果。translateX为水平方向移动（X轴移动），基点是元素中心点，translateX(20px)即中心向右移动20像素。transition则是用来过渡效果的，这里主要定义了进入、进出的效果。

6、handleLin氯短赤亻k事件处理这是用来快速返回之前的任意页面，由于路由中经常包含参数，所以这里我们需要对路由进行处理一下，唁昼囫缍这里我们可以利用path-to-regexp插件，这是一个url 的正则表达式能够很方便得从路由中提取我们想要的数据，path-to-regexp直接npm安装即可。compile() 方法用于在脚本执行过程中编译正则表达式，可以快速填充 url字符串的参数值。