路由的动效实现

1.路由

1. 路由激活

   • A: 自己书写一个类名或是使用第三方给的类名
   • B；在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 )})
   • 以上两个方法的区别是
     • 第一种方法

       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'
       }
     ] 
   

vue的非响应式情况

1. 数组的下标

  <div id="app">
    <button @click = "change"> 点击 </button>
    <ul>
      <li v-for = ' (item,index) in list ' :key = 'index'> 
          <p> {{ item }} </p>
      </li>
    </ul>
  </div>

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

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

2. 数组的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)
      }
    }
  })