一、路由分组懒加载

/* webpackChunkName: "a" */，通过写相同的name进行分组懒加载

不可能每个组件都懒加载
路由懒加载可以提高首屏的加载速度，每次点击都会等一下
如果用户点击一个页面后，必须会再次点击一个页面，就没必要全部使用懒加载，这个时候就可以使用路由分组懒加载，在地址前加上一段注释。
同一个组使用同一名称即可。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    // 路由组件懒加载
    // component: ()=>import('../views/Home.vue')
    // 路由分组懒加载
    component: ()=>import(/* webpackChunkName: "a" */'../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "a" */'../views/About.vue')
  },
  {
    path: '/one',
    name: 'One',
    component: () => import(/* webpackChunkName: "b" */'../views/One.vue')
  },
  {
    path: '/two',
    name: 'Two',
    component: () => import(/* webpackChunkName: "b" */'../views/Two.vue')
  },
  {
    path: '/three',
    name: 'Three',
    component: () => import(/* webpackChunkName: "c" */'../views/Three.vue')
  },
  {
    path: '/four',
    name: 'Four',
    component: () => import(/* webpackChunkName: "c" */'../views/Four.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

二、scoped属性

1.style标签添加scoped属性，表示局部样式，这里面定义的样式，只在当前组件中有效

2.用于设置局部样式，当前组件中的样式只对当前组件生效

3.注意：App组件中的样式是全局样式，通常不加scoped

<style scoped></style>

三、sass -D开发起来 -save生产依赖

使用sass可以定义嵌套定义样式，大大节省css代码

使用sass可以用$符号定义变量，可以统一定义风格

（1）安装

npm install sass sass-loader@8 -D

（2）安装后就可以在组件中使用sass了

<style scoped lang="scss">
$red:darkred;
.about{
  border: 1px solid black;
  padding: 5px;
  h2{
    color:black;
  }
  h3{
    color: $red;
  }
  p{
    color: $red;
  }
  .province{
    color: $red;
    font-size: 30px;
    .city{
      color: green;
      font-size: 25px;
      .district{
        color: blue;
        font-size: 20px;
        .street{
          color: orange;
          font-size: 15px;
        }
      }
    }
  }
}
</style>

如果报错找不到node-sass，需要再安装下node-sass

npm install node-sass -D

四、less

（1）下载

npm i less@3 -D 
npm i less-loader@7 -D

<style scoped lang="less">
@red:red;
 h2 {
    color: black;
  }
  p {
    color: @red;
  }
  .province {
    color: @red;
    font-size: 30px;
    .city {
      color: green;
      font-size: 25px;
      .district {
        color: blue;
        font-size: 20px;
        .street {
          color: purple;
          font-size: 15px;
        }
      }
    }
  }
</style>

五、添加路由缓存

（1）keep-alive组件，用于对路由视图进行缓存。

在路由根组件添加keep-alive,添加后切换不会丢失添加的数据，有缓存

（2）绑定includes属性指定缓存的组件，该属性可以传一个数组，数组中定义组件的名称。

    <keep-alive :include="['Two','Three']">
      <!-- 这里写的是组件的名字name -->
      <router-view></router-view>
    </keep-alive>

六、路由组件特有的两个生命周期

1.添加路由缓存后created和mounted这两个生命周期函数只会在第一次执行。

2.添加路由缓存后，destroyed这个生命周期函数，不会执行

3.如果组件没有使用缓存，我们使用mounted和destroyed

  // 注意：Three组件采用了路由缓存，所以，created和mounted这两生命周期函数，只会在第一次执行。
    created() {
        console.log('创建完成');
    }, 
    mounted() {
        console.log('挂载完成');
    },
    // 注意：Three组件采用了路由缓存，所以，destroyed这个生命周期函数，不会执行。
    destroyed() {
        console.log('组件销毁完成');
    },
    // 路由组件激活状态生命周期函数
    activated() {
        console.log('路由组件激活');
        //开启定时器
        this.timer = setInterval(()=>{
            this.count++
        },1000)
    },
    // 路由组件失活状态生命周期函数
    deactivated() {
        console.log('路由组件失活');
        clearInterval(this.timer)
    },  跳转到页面显示组件激活，离开页面显示组件失活
    // 注意：当路由组件采用缓存后，通常都会配合这两个生命周期钩子。

总结本篇知识点：路由分组懒加载、scoped、sass、less、添加路由缓存和路由换的生命周期钩子

vue-cli——路由懒加载&sass&less&scoped&路由缓存&路由组件生命周期钩子