路由的拓展（路由 激活/缓存/动画/数据预载/懒加载）

1. 路由激活
   • A: 自己书写一个类名或是使用第三方给的类名
   • B:在router-link组件身上添加一个 （类名-class） 的属性

<router-link to = "/home" active-class = "active"/>

2. 路由的缓存

• 在router-link组件上添加一个属性 keep-alive

   <router-link to = "/home" keep-alive></router-link>

3. 路由的动画

   • A：先安装 animate.css 可以模块化引入 yarn add animate.css

   • B: 在main.js中引入 import 'animate.css'（这是全局的引入，也可以在你需要的组件中引入）

   • C：将router-view 组件用transition组件包裹

   • D: 在transition组件身上添加 enter-active-class 和 leave-active-class

     1. 路由激活  
     

   • A: 自己书写一个类名或是使用第三方给的类名

   • B:在router-link组件身上添加一个 （类名-class） 的属性

<router-link to = "/home" active-class = "active"/>

2. 路由的缓存

• 在router-link组件上添加一个属性 keep-alive

   <router-link to = "/home" keep-alive></router-link>

3. 路由的动画
   • A：先安装 animate.css 可以模块化引入 yarn add animate.css
   • B: 在main.js中引入 import 'animate.css'（这是全局的引入，也可以在你需要的组件中引入）
   • C：将router-view 组件用transition组件包裹
   • D: 在transition组件身上添加 enter-active-class 和 leave-active-class

 		<transition
            enter-active-class="animated slideInLeft"        
            leave-active-class="animated slideOutLeft" 
            mode="out-in"  
            name = "router"     
          >
          	<router-view></router-view>
         </transition>

4. 路由的数据预载（导航完成前获取数据）
   • 核心
     1. next( vm => { Vue.set(vm.dataAttr,key,value) })
     2. next( vm => { vm.setDate(vm.dataAttr,value )})
   • 以上两个方法的区别是
     • 第一种方法

	 next(vm => { //vm指的就是组件
	          const result = JSON.parse(res.data)
	          vm.$set(vm.data,'category',result)
	        })
	        //data中数据要这样定义（用对象）
	        data () {
	          return {
	            data: {
	              category: null
	            }
	          }
	        }

 	- 第二种方法( 官网 )
	  next(vm => vm.setData(vm.dataAttr, value))
	
	          data () {
	            return {
	              category: null
	            }
	          }

5. 路由的懒加载
   1. 概念： 指的是，对应的路由加载对应的路由组件—按需加载路由
   2. Vue异步组件
   3. webpack的代码分割

		const routerLayLoad = ( comName ) => {
			        return () => {
			          import (/* webpackChunkName: "view-[request]" */../components/pages/${view}.vue`)
			        }
			      }
			      const routes = [
			        {
			          path: '/home',
			          component: routerLayLoad('Home')
			        {
			          path: '/mine',
			          component: routerLayLoad('Mine')
			       }
			   ]