1. 路由模式
// 路由模式
// 有兩種模式：hash模式（默認(rèn)） 和 history模式
// hash模式过吻，使用的是錨鏈接的原理實(shí)現(xiàn)路由的跳轉(zhuǎn)售碳，這種方式兼容性非常好句喷；缺點(diǎn)是路徑帶有#號(hào)亲怠，不夠美觀若皱。
// history模式镊叁，使用的是瀏覽器中內(nèi)置的history對(duì)象實(shí)現(xiàn)路由的跳轉(zhuǎn)，這種方式不兼容老版本的瀏覽器走触，刷新后會(huì)丟失路由信息狼电。
mode:'hash'
2. 路由元信息
meta選項(xiàng)蚌吸，用于配置路由的元信息信峻，里面的內(nèi)容是自定義的焙格，用于配置路由的數(shù)據(jù)
{
path:'/',
name:'home',
meta:{
title:'首頁(yè)'
},
// 路由組件懶加載
component:()=>import('../pages/Home.vue'),
}
之后在首頁(yè)掛載完成之后使后臺(tái)標(biāo)題發(fā)生變化
<script>
export default {
mounted() {
document.title = "首頁(yè)";
},
};
</script>
3. nprogress加載進(jìn)度條
安裝
npm install nprogress
導(dǎo)入
// 導(dǎo)入nprogress
import NProgress from "nprogress";
// 導(dǎo)入nprogress的樣式
import "nprogress/nprogress.css";
在導(dǎo)航守衛(wèi)中使用
// 導(dǎo)航守衛(wèi)
// 1.路由前置守衛(wèi)--路由跳轉(zhuǎn)之前
router.beforeEach((to, from, next) => {
// to 返回去哪里的路由信息
// from 返回從哪來(lái)的路由信息
// next方法，用于跳轉(zhuǎn)
// 開(kāi)啟loading
NProgress.start();
// 通常：在這里會(huì)做一些權(quán)限驗(yàn)證操作
next();
});
// 2.路由后置守衛(wèi)--路由跳轉(zhuǎn)完成
router.afterEach((to, from) => {
// 通常：在這里會(huì)做一些頁(yè)面的修改操作
document.title = to.meta.title;
// 結(jié)束loading
NProgress.done();
});
4. 路由懶加載
// 路由組件懶加載
component:()=>import('../pages/Home.vue')
5. 路由分組懶加載
// 路由組件分組懶加載
component:()=>import(/* webpackChunkName: "a" */'../pages/News.vue')
6. scoped
app組件中的樣式是全局樣式惫皱，通常不加scoped
style標(biāo)簽添加scoped屬性像樊，表示局部樣式，這里定義的樣式 只在當(dāng)前組件中有效
<style scoped>
.car{
border: 1px solid blue;
padding: 5px;
}
h2{
color: pink;
}
</style>
router-link-exact-active 是精確匹配規(guī)則旅敷，即只有當(dāng)前點(diǎn)擊router被匹配
#nav a.router-link-exact-active {
color: #42b983;
}
7. sass
安裝
npm install sass sass-loader@8 -D
如果出現(xiàn)Error: Cannot find module 'node-sass'
就在終端安裝node-sass
npm i node-sass -D
-D是開(kāi)發(fā)依賴
使用
<style scoped lang="scss">
// 使用sass可以定義嵌套定義樣式生棍，大大節(jié)省css代碼
// lang="scss" 就表示下面的樣式采用的sass語(yǔ)法編寫(xiě)。
// 使用sass可以定義變量
$red:red;
.about {
padding: 5px;
border: 1px solid pink;
h1 {
color: chartreuse;
}
p {
color: $red;
}
h3 {
color: $red;
}
.prov {
font-size: 30px;
color: green;
.city {
font-size: 25px;
color: red;
.dis {
font-size: 20px;
color: skyblue;
.street {
font-size: 15px;
color: purple;
}
}
}
}
}
</style>
8. less
安裝
npm i less less-loader -D
注意：在less里面定義變量的符號(hào)是@
報(bào)錯(cuò)
npm i less-loader@7 -D
npm i less@3 -D
<style scoped lang="less">
...
</style>
