7、动态路由
在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：
/user/aaa或/user/bbb
除了有前面的/user之外，后面还跟上了用户的ID
这种path和Component的匹配关系，我们称之为动态路由（也是路由传递数据的一种方式）
8、路由懒加载
路由懒加载的方式
方式一：结合Vue的异步组件和Webpack的代码分析
const Home = resolve => { require. ensure(['../ components/Home.vue'], () => { resolve(require('../ components/Home.vue')) })};
方式二：AMD写法
const About = resolve => require([' ../ components/ About.vue'], resolve);
方式三：在ES6中，我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割
const Home = () => import(' . ./ components/Home.vue ' )
路由懒加载的效果
9、嵌套路由实现
10、传递参数的方式
传递参数主要有两种类型：params和query
- params的类型：
- 配置路由格式：/router/:id
- 传递的方式：在path后面跟上对应的值
- 传递后形成的路径：/router/123，/router/abc
- query的类型：
- 配置路由格式：/router，也就是普通配置
- 传递的方式：对象中使用query的key作为传递方式
- 传递后形成的路径：/router?id= 123，/router?id=abc
11、导航守卫的使用
我们可以利用beforeEach来完成标题的修改
- 首先，我们可以在钩子当中定义一些标题，可以利用mate来定义
- 其次，利用导航守卫修改我们的标题
- 导航钩子的三个参数解析：
- to：即将要进入的目标的路由对象
- from：当前导航即要离开的路由对象
- next：调用该方法后，才能进入下一个钩子
- 如果是后置钩子，也就是afterEach，不需要主动调用next(）函数。
上面我们使用的导航守卫，被称之为全局守卫。
12、TabBar实现思路
1. 如果在下方有两个单独的TabBar组件，你如何封装
自定义TabBar组件，在APP中使用
让TabBar处于底部，并且设置相关的样式
2.TarBar中显示的内容由外界决定
定义插槽
flex布局平分TabBar
3.自定义TarBarItem，可以传入图片和文字
定义TabBarItem，并且定义两个插槽：图片、文字。
给两个插槽外层包装div，用于设置样式。
填充插槽，实现底部TabBar的效果。
4.传入高亮图片
定义另外一个插槽，插入active-icon的数据
定义一个变量isActive，通过v-show来决定是否显示对应的icon
5.TabBarItem绑定路由数据
安装路由：npm install vue-route --save
完成router/index.js的内容，以及创建对应的组件
main.js中注册router
APP中加入<router-view>组件
6.点击item跳转到对应路由，并且动态决定isActive
监听item的点击，通过this.$router.replace()替换路由路径
通过this.$route.path.indexOf(this.link) !== -1来判断是否是active
7.动态计算active样式
封装新的计算属性：this.isActive ? {'color': 'red'}:{}
效果图：
创作不易，望老铁们来个三连，
别忘了点赞，可以让更多人看到这篇文章，感谢
