一、style样式
1、当在style里面添加scoped属性的时候。
（1）、表示定义的属性只在当前页面中使用。
（2）、一般情况下，除了App.vue不添加之外，其他页面的style样式中都会添加scoped属性。
2、在style标签内引入css样式（最新）
使用之前需要先安装
npm install sass sass-loader@8 -D
引入：
<style scoped lang="less">
作用
（1）、可以定义嵌套样式(节省css代码)。
.one {
border: 2px solid slategray;
padding: 5px;
h2 {
color: #42b983;
}
h3 {
color: @red;
}
p {
color: @red;
}
}
//层层嵌套
.one .proveince {
color: @red;
font-size: 30px;
.city {
color: blueviolet;
font-size: 24px;
.district {
color: yellowgreen;
font-size: 20px;
.street {
color: tomato;
font-size: 15px;
}
}
}
}
（2）、@：定义变量。
可以统一定义风格。每次只需要修改@自定义名字里面的内容。紧接着使用@自定义名字的都会跟着修改。
当需要修改统一的页面外观的时候比较方便。
@red: red;
.one {
border: 2px solid slategray;
padding: 5px;
h2 {
color: #42b983;
}
h3 {
color: @red;
}
p {
color: @red;
}
}
3、引用scss样式（以前）
安装：（如果不成功的话，需要一级一级的降版本）
npm install less@3 less-loader@7 -D
引用：
<style scoped lang="scss">
（1）、可以定义嵌套样式。（节省css代码）
（2）、$：定义变量。
可以统一定义风格。每次只需要修改@自定义名字里面的内容。紧接着使用@自定
二、路由缓存
1、安装
npm install vue-router
2、keep-alive:用于缓存路由组件。
用keep-alive把router-view包裹起来。
（1）、默认情况下会缓存打开的所有组件。
<keep-alive>
<router-view />
</keep-alive>
（2）、如果需要指定缓存哪些组件的话，通过:include属性指定。该组件传的是一个数组
<keep-alive :include="['Two','Three']">
<router-view />
</keep-alive>
3、当组件采用了路由缓存的时候，那么created和mounted这两个生命周期函数就会在第一次执行一次。
4、当组件采用了路由缓存的时候，那么destroyed（组件销毁完成）这个生命周期函数不会执行。
5、当路由采用缓存的时候，会使用两个生命周期函数
（1）、activated：路由组件激活状态。（点进来）
activated() {
console.log("路由组件激活");
this.timer= setInterval(() => {
this.count++;
}, 1000);
},
（2）、deactivated：路由组件失活状态。（跳转出去）
export default {
name: "Three",
timer:null,
},
deactivated() {
console.log("路由组件失活");
// 组件失活之后清除计时器
clearInterval(this.timer)
},
