一、路由傳參
1. params 參數(shù)
（1）params 參數(shù)
路由配置
頁面
（2）v-html指令
v-html指令，可以渲染富文本內(nèi)容（包含html信息的內(nèi)容）。
v-text指令，渲染文本內(nèi)容。
當需要渲染的數(shù)據(jù)是html內(nèi)容時，使用v-html指定。
2、query參數(shù)
路由地址，采用query傳參方式：?參數(shù)1=XXX&參數(shù)2=XXX
3、$router和$route
$router返回的是當前項目中的路由器對象。
$route返回的是當前路由信息。
4、vue.config.js
vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那么它會被 @vue/cli-service 自動加載。
二、添加路由
1、路由規(guī)則redirect屬性重定向
redirect屬性：進行重定向URL地址。
2、添加404路由
5、路由進階
1、路由進階分為兩種模式? 一種是hash模式，另一種是history模式
// hash模式，使用的是錨鏈接的原理實現(xiàn)路由的跳轉(zhuǎn)，這種方式兼容性非常好；缺點是路徑帶有#號，不夠美觀。
// history模式，使用的是瀏覽器中內(nèi)置的history對象實現(xiàn)路由的跳轉(zhuǎn)，這種方式不兼容老版本的瀏覽器，刷新后會丟失路由信息。mode:'hash'
2. 路由元信息
切換路由時title也要跟著變化
3. nprogress加載進度條
nprogress是頁面跳轉(zhuǎn)時出現(xiàn)在瀏覽器頂部的進度條
安裝
npminstallnprogress
導入
// 導入nprogressimportNProgressfrom"nprogress";// 導入nprogress的樣式import"nprogress/nprogress.css";
在導航守衛(wèi)中使用
childer是二級路由
需要先定義一級路由組件，確定好在哪個組件中配置二級路由，就去那個組件的配置規(guī)則中添加children關(guān)鍵字，按照一級路由的配置方法配置規(guī)則。
路由懶加載
使用路由懶加載，是為了給客戶更好的體驗，首頁組件加載速度更快一些，提高首屏性能。
懶加載簡單來說就是延遲加載或按需加載，即在需要的時候的時候進行加載。
8、scoped
scoped屬性，用于設(shè)置局部樣式，當前組件中的樣式只對當前組件生效。
注意：App組件中的樣式是全局樣式，通常不加scoped。
9、sass
Sass 是一個 CSS 預處理器。使用sass可以定義嵌套定義樣式，大大節(jié)省css代碼；使用sass可以使用定義變量，可以統(tǒng)一定義風格。
安裝
npm install sass sass-loader@8 -D
less
less 也是一個 CSS 預處理器。
注意：在less里面定義變量的符號是@。
安裝
npm i? less@3-D
npm i? less-loader@7-D
路由緩存
1、keep-alive組件
keep-alive：用于緩存路由組件，默認情況下會緩存打開的所有組件。如果需要指定緩存哪些組件，通過include屬性指定，該屬性可以傳一個數(shù)組，數(shù)組中定義組件的名稱。
作用：通過路由緩存，組件之間的切換就能保存上個組件的狀態(tài)，而不是切換之后又得重新操作。
2、路由組件特有的兩個生命周期
當路由組件采用緩存后，created和mounted這兩個生命周期函數(shù)，只會在第一次執(zhí)行；并且destroyed這個生命周期函數(shù)不會執(zhí)行。
這時候，通常都會配合activated（路由組件激活狀態(tài)生命周期函數(shù)）和deactivated（路由組件失活狀態(tài)生命周期函數(shù)）這兩個生命周期鉤子。
注意：只有當組件在 內(nèi)被切換，才會有activated 和 deactivated 這兩個鉤子函數(shù)。
