一、style樣式
1唁盏、當(dāng)在style里面添加scoped屬性的時(shí)候内狸。
（1）、表示定義的屬性只在當(dāng)前頁面中使用厘擂。
（2）昆淡、一般情況下，除了App.vue不添加之外刽严，其他頁面的style樣式中都會(huì)添加scoped屬性昂灵。
2、在style標(biāo)簽內(nèi)引入css樣式（最新）
使用之前需要先安裝
npm install sass sass-loader@8 -D
引入：
<style scoped lang="less">
作用
（1）舞萄、可以定義嵌套樣式(節(jié)省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）、@：定義變量鹏氧。
可以統(tǒng)一定義風(fēng)格渤涌。每次只需要修改@自定義名字里面的內(nèi)容。緊接著使用@自定義名字的都會(huì)跟著修改把还。
當(dāng)需要修改統(tǒng)一的頁面外觀的時(shí)候比較方便实蓬。
@red: red;
.one {
border: 2px solid slategray;
padding: 5px;
h2 {
color: #42b983;
}
h3 {
color: @red;
}
p {
color: @red;
}
}
3、引用scss樣式（以前）
安裝：（如果不成功的話吊履，需要一級(jí)一級(jí)的降版本）
npm install less@3 less-loader@7 -D
引用：
<style scoped lang="scss">
（1）安皱、可以定義嵌套樣式。（節(jié)省css代碼）
（2）艇炎、$：定義變量酌伊。
可以統(tǒng)一定義風(fēng)格。每次只需要修改@自定義名字里面的內(nèi)容。緊接著使用@自定
二居砖、路由緩存
1虹脯、安裝
npm install vue-router
2、keep-alive:用于緩存路由組件奏候。
用keep-alive把router-view包裹起來循集。
（1）、默認(rèn)情況下會(huì)緩存打開的所有組件蔗草。
<keep-alive>
<router-view />
</keep-alive>
（2）咒彤、如果需要指定緩存哪些組件的話，通過:include屬性指定咒精。該組件傳的是一個(gè)數(shù)組
<keep-alive :include="['Two','Three']">
<router-view />
</keep-alive>
3镶柱、當(dāng)組件采用了路由緩存的時(shí)候，那么created和mounted這兩個(gè)生命周期函數(shù)就會(huì)在第一次執(zhí)行一次模叙。
4歇拆、當(dāng)組件采用了路由緩存的時(shí)候，那么destroyed（組件銷毀完成）這個(gè)生命周期函數(shù)不會(huì)執(zhí)行范咨。
5查吊、當(dāng)路由采用緩存的時(shí)候，會(huì)使用兩個(gè)生命周期函數(shù)
（1）湖蜕、activated：路由組件激活狀態(tài)。（點(diǎn)進(jìn)來）
activated() {
console.log("路由組件激活");
this.timer= setInterval(() => {
this.count++;
}, 1000);
},
（2）宋列、deactivated：路由組件失活狀態(tài)昭抒。（跳轉(zhuǎn)出去）
export default {
name: "Three",
timer:null,
},
deactivated() {
console.log("路由組件失活");
// 組件失活之后清除計(jì)時(shí)器
clearInterval(this.timer)
},
