一狡恬、路由懶加載
1迅涮、用路由懶加載的好處
使用路由懶加載后，在vue服務第一次加載時壓力小一些湾戳，不會出現(xiàn)超長首頁白屏問題贤旷。
2、怎么寫路由懶加載
路由懶加載
// 路由組件懶加載
component:()=>import('../pages/Home.vue')
路由分組懶加載
// 路由組件分組懶加載
component:()=>import(/* webpackChunkName: "a" */'../pages/News.vue')
未使用路由懶加載： 使用import在一開始將組件直接引入砾脑，在component導入
const routes = [
{
path: '/',
name: 'Home',
// 路由組件懶加載
//component:()=>import('../views/Home.vue')
// 路由分組懶加載
component:()=>import(/* wepackChunkName:"a" */'../views/Home.vue')
},
二幼驶、scoped
/* 注意：App組件中的樣式是全局樣式，通常不加scope */
scoped屬性韧衣，用于設置局部樣式盅藻，當前組件中的樣式只對當前組件生效
<style scoped>
....
</style>
三购桑、sass
安裝
npm install sass sass-loader@8 -D
使用
sass的一個用法：嵌套定義樣式
使用sass 可以定義變量
<style scoped lang="scss">
// lang="scss" 就表示下面的樣式采用的sass語法編寫。
// 定義變量
//&符號表示當前元素
$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:blue;
font-size: 30px;
}
.district{
color: green;
font-size: 30px;
}
.street{
color: yellow;
font-size: 30px;
}
}
h2{
color: green;
}
四氏淑、less
<style scoped lang="less">
// 注意：在less里面定義變量的符號是@
@red: darkred;
.one {
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>
五勃蜘、路由模式
// 路由模式
// 有兩種模式：hash模式（默認） 和 history模式
// hash模式，使用的是錨鏈接的原理實現(xiàn)路由的跳轉假残，這種方式兼容性非常好缭贡；缺點是路徑帶有#號，不夠美觀守问。
// history模式匀归，使用的是瀏覽器中內置的history對象實現(xiàn)路由的跳轉，這種方式不兼容老版本的瀏覽器耗帕，刷新后會丟失路由信息。
mode:'hash'
六袱贮、路由元信息
{
path:'/',
name:'home',
// meta選項仿便，用于配置路由的元信息，里面的內容是自定義的攒巍，用于配置路由的數(shù)據(jù)
meta:{
title:'首頁'
},
// 路由組件懶加載
component:()=>import('../pages/Home.vue'),
}
七嗽仪、nprogress加載進度條
安裝
npm install nprogress
導入
// 導入nprogress
import NProgress from "nprogress";
// 導入nprogress的樣式
import "nprogress/nprogress.css";
在導航守衛(wèi)中使用
// 導航守衛(wèi)
// 1.路由前置守衛(wèi)--路由跳轉之前
router.beforeEach((to, from, next) => {
// to 返回去哪里的路由信息
// from 返回從哪來的路由信息
// next方法，用于跳轉
// 開啟loading
NProgress.start();
// 通常：在這里會做一些權限驗證操作
next();
});
// 2.路由后置守衛(wèi)--路由跳轉完成
router.afterEach((to, from) => {
// 通常：在這里會做一些頁面的修改操作
document.title = to.meta.title;
// 結束loading
NProgress.done();
});
八柒莉、二級路由
//配置子路由信息
children:[
//手機訂單路由
{
path:'phoneOrder',
name:'phoneOrder',
meta:{
title:'手機訂單'
},
component:()=>import(/* webpackChunkName: "b" */'../pages/Order/PhoneOrder.vue')
}
]
九闻坚、路由緩存
1. keep-alive組件
keep-alive組件，用于對路由視圖進行緩存兢孝；include屬性指定緩存的組件窿凤，
該屬性可以傳一個數(shù)組，數(shù)組中定義組件的名稱跨蟹。
keep-alive用于緩存路由組件雳殊，默認情況下會緩存打開的所有組件，
如果需要指定緩存哪些組件窗轩，通過include屬性指定夯秃。
<keep-alive :include="['newsGn','newsGj']">
<router-view></router-view>
</keep-alive>
2. 路由組件特有的兩個生命周期
// 路由組件激活狀態(tài)生命周期函數(shù)
activated() {
// 開啟定時器
this.timer = setInterval(() => {
this.count++
}, 1000);
},
// 路由組件失活狀態(tài)生命周期函數(shù)
deactivated() {
clearInterval(this.timer)
},
