router(续)

学无止境，望君把握时间

1.路由激活：

- A: 自己书写一个类名或是使用第三方给的类名
- 在router-link组件身上添加一个 active-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 )})
      3. 以上两个方法的区别是：
          第一种方法
           next(vm => { //vm指的就是组件
          const result = JSON.parse(res.data.slice(7,-1)).rp_result.categorys
          vm.$set(vm.category,'categorys',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 routerLaayLoad = ( comName ) => {
        return () => {
          import (/* webpackChunkName: "view-[request]" */ `../components/pages/${view}.vue`)
        }
      }
      const routes = [
        {
          path: '/',
          redirect: '/home'
        },
        {
          path: '/home',
          component: () => {

          },
          children: [
            {
              path: 'food',
              components: {
                second: routerLayLoad('home/Food')
              },
              name: 'food' 
            }
          ]
        },
        {
          path: '/category',
          component: routerLayLoad('Category'),
      /*     children: [
            {
              path: 'list/:id',
              component: List,
              name: 'list'
            }
          ] */
        },
        {
          path: '/list/:id',
          component: routerLayLoad('List'),
          name: 'list'
        },
        {
          path: '/login',
          component: routerLayLoad('Login')
        },
        {
          path: '/reg',
          component: routerLayLoad('Reg')
        },
        {
          path: '/mine',
          component: routerLayLoad('Mine')
        },
        {
          path: '/error',
          component: routerLayLoad('Error')
        },
        {
          path: '**',
          redirect: '/error'
        }
      ] 

6vue的非响应式情况：

  1. 数组的下标
  <div id="app">
      <button @click = "change"> 点击 </button>
      <ul>
        <li v-for = ' (item,index) in list ' :key = 'index'> 
            <p> {{ item }} </p>
        </li>
      </ul>
    </div>
    <script>
	 new Vue({
	      el: '#app',
	      data: {
	        list: ['a','b','c']
	      },
	      methods: {
	        change () {
	          // this.list[0] = 'junge'
	          this.$set(this.list,'0','junge')
	        }
	      }
	    })
    </script>

解决方案： 使用   Vue.set  || this.$set

7.数组的length：

当我们删除一个数组时，可以使用  arr.length = 0,但是vue不会响应
解决方案： 使用splice(newLength)

new Vue({
      el: '#app',
      data: {
        list: ['a','b','c']
      },
      methods: {
        change () {
          // this.list.length = 0
          this.list.splice(0)
        }
      }
    })