https://juejin.im/post/5d5375a0f265da03db076f59#heading-32
vue基礎知識點
1. vue中常見的指令
1.1 數據相關的指令
- v-text:
- 主要用來更新textContent
- 雙大括號的方式會將數據解釋為純文本,而非HTML
<span v-text="msg"></span>
<!-- 兩者等價 -->
<span>{{msg}}</span>
-
v-html:
- 命令模式可以解釋html
<div v-html="rawHtml"></div>
- v-model:
- 用于在表單上創建雙向數據綁定
<div id="app">
<input v-model="somebody">
<p>hello {{somebody}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
somebody:'小明'
}
})
</script>
上面這個例子中直接在瀏覽器input中輸入別的名字,下面的p的內容會直接跟著變。這就是雙向數據綁定。
v-model:僅僅是一個語法糖,相當于
:value
+@input
input
事件:當輸入框中的數據改變時發生
1.2屬性相關的指令:
- v-bind ``>
- 用于綁定html標簽中的屬性
- v-bind:href="數據"
- 簡寫: :href = "數據"
- 用于綁定html標簽中的屬性
<a v-bind:href="hrefname">百度</a>
<a :href="hrefname">百度</a>
<script>
var app = new Vue({
el:"#app",
data: {
hrefname:"http://www.baidu.com",
}
})
</script>
1.3 條件指令:
- v-if v-if可以實現條件渲染,Vue會根據表達式的值的真假條件來渲染元素。
<a v-if="ok">yes</a>
如果屬性值ok為true,則顯示。否則,不會渲染這個元素。
- v-else v-else是搭配v-if使用的,它必須緊跟在v-if或者v-else-if后面,否則不起作用。
<a v-if="ok">yes</a>
<a v-else>No</a
- v-else-if v-else-if充當v-if的else-if塊,可以鏈式的使用多次。可以更加方便的實現switch語句。
<div v-if="type``='A'">
A
</div>
<div v-if="type``='B'">
B
</div>
<div v-if="type``='C'">
C
</div>
<div v-else>
Not A,B,C
</div>
- v-show
<h1 v-show="ok">hello world</h1>
也是用于根據條件展示元素。和v-if不同的是,如果v-if的值是false,則這個元素被銷毀,不在dom中。但是v-show的元素會始終被渲染并保存在dom中,它只是簡單的切換css的dispaly
屬性。
注意:v-if有更高的
切換開銷
v-show有更高的初始渲染開銷。 因此,如果要非常頻繁的切換,則使用v-show較好;如果在運行時條件不太可能改變,則v-if較好
特別提醒
v-show
需要放到一個真實的dom上,不能放在template
上面
1.4 循環指令:
v-for 遍歷數組
<p v-for="(value,index) in links">{{value}}</p>
注意:在使用v-for過程中,要綁定唯一的key
,key盡量不要綁定index,如果有id盡量綁定id
<p v-for="(value,index) in links" :key="index">{{value}}</p>
特別提醒
建議不要在與
v-for
相同的元素上使用v-if
。因為v-for
指令的優先級高于v-if
當它們處于同一節點。v-for
的優先級比v-if
更高,這意味著v-if
將分別重復運行于每個v-for
循環中。
1.5 兩個特殊的屬性:class style
- class
- :class="數據"
- :class="三元運算符"
- :class="{類名:boolean}"
- :class="{類名1:boolean,類名2:boolean}"
- 類名中有-,需要使用引號包起來
- :class="['類名']"
<style>
.abc{color: red;}
.def{background-color: blue;}
.g-h{color: yellow;}
</style>
<div id="app">
<p class="abc">這是一個p標簽</p>
<p :class="className">這是一個p標簽</p>
<!-- ? : 三元運算符 -->
<p :class="isPass ? className : ''">這是一個p標簽</p>
<p :class="{abc:true}">這是一個p標簽</p>
<p :class="{abc:isPass}">這是一個p標簽</p>
<p :class="{abc:isPass,def:true}">這是一個p標簽</p>
<p :class="{'g-h':true}">這是一個p標簽</p>
<p :class="['abc','def']">這是一個p標簽</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name:"wangcai",
className:"abc",
isPass:true,
}
})
</script>
- style的用法
<div id="app">
<p :style="myStyle">這是一個p標簽</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
myStyle:{color:'red',backgroundColor:'blue'}
}
})
</script>
2. vue 中掛載的屬性及方法
2.1 el
el指定app管理的邊界
面試題
如何通過
$el
獲取到更新后的dom元素? 答:在下一下事件環中得到更新后dom元素
2.2 data
數據模型
2.3 methods
2.4 computed
計算屬性,依賴于data中的數據
計算屬性和方法的區別:
- 1,它們兩個本質都是函數
- 2,用的時候,方法需要調用,計算屬性是當成數據來使用
- 3,方法沒有緩存,計算屬性有緩存
2.5 filters
過濾器
過濾器的簡單使用:
2.6 components
組件:三部曲
- 定義組件
- 注冊組件
- 使用組件
組件的簡單使用:
2.7 鉤子函數
生命周期方法
2.8 $watch
$watch
可以監控Data中的數據,通過$watch
得到值,肯定是更新后的值 使用
vm.$watch( "name", function(newValue,oldValue){ } )
2.9 $nextTick()
vue中的$nextTick主要涉及到vue中DOM的異步更新 nextTick
應用場景及原因
- 在Vue生命周期的
created()
鉤子函數進行的DOM操作一定要放在Vue.nextTick()
的回調函數中
原因:在
created()
鉤子函數執行的時候DOM 其實并未進行任何渲染,而此時進行DOM操作無異于徒勞,所以此處一定要將DOM操作的js代碼放進Vue.nextTick()
的回調函數中。與之對應的就是mounted()
鉤子函數,因為該鉤子函數執行時所有的DOM掛載和渲染都已完成,此時在該鉤子函數中進行任何DOM操作都不會有問題 。
- 在數據變化后要執行的某個操作,而這個操作需要使用隨數據改變而改變的DOM結構的時候,這個操作都應該放進
Vue.nextTick()
的回調函數中。
Vue的官方文檔中詳細解釋
Vue 異步執行 DOM 更新。只要觀察到數據變化,Vue 將開啟一個隊列,并緩沖在同一事件循環中發生的所有數據改變。如果同一個 watcher 被多次觸發,只會被推入到隊列中一次。這種在緩沖時去除重復數據對于避免不必要的計算和 DOM 操作上非常重要。然后,在下一個的事件循環“tick”中,Vue 刷新隊列并執行實際 (已去重的) 工作。Vue 在內部嘗試對異步隊列使用原生的
Promise.then
和MessageChannel
,如果執行環境不支持,會采用setTimeout(fn, 0)
代替。
例如,當你設置
vm.someData = 'new value'
,該組件不會立即重新渲染。當刷新隊列時,組件會在事件循環隊列清空時的下一個“tick”更新。多數情況我們不需要關心這個過程,但是如果你想在 DOM 狀態更新后做點什么,這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發人員沿著“數據驅動”的方式思考,避免直接接觸 DOM,但是有時我們確實要這么做。為了在數據變化之后等待 Vue 完成更新 DOM ,可以在數據變化之后立即使用Vue.nextTick(callback)
。這樣回調函數在 DOM 更新完成后就會調用。
2.10 $set
$set
可以給data中動態地添加一個數據,前提
是只能給對象中添加數據
示例
3. 事件模型
事件三要素: 事件源,事件類型,監聽器
語法
:v-on: 處理事件 或 @處理事件
3.1 事件類型
- 鼠標事件:
- click:單擊事件
- dblclick:雙擊事件
- mouseover:鼠標進入事件
- mouseout:鼠標移開事件
- mouseenter:鼠標進入事件
- mouseleave:鼠標離開
- mousedown:鼠標按下
- mousemove:鼠標移動
- mouseup:鼠標抬起
- 鍵盤事件:
- keyup:鍵盤抬起
- keypress:按鍵并產生第一個字符時
- keydown:鍵盤按下
- UI事件:
- scroll:滾動條事件
- resize:瀏覽器窗口改變
- load:文檔加載完畢
- unload:文檔未加載
- 焦點事件:
- focus:焦點事件
- blur:失去焦點
- 表單事件:
- change:數據發生改變時
- submit:提交
注意:mouseover / mouseout 與 mouseenter / mouseleave的區別
- 當綁定事件的元素里面沒有子元素的時候,兩組觸發效果是一致的。
- 當綁定事件的元素里面有子元素的時候,鼠標經過綁定mouseover的當前元素以及它里面的子元素的時候,都會觸發, 而經過綁定mouseenter的元素時,只會在鼠標剛進入的時候觸發,當進入其子元素的時候,是不會再觸發的了。
總結
:
不論鼠標指針穿過被選元素或其子元素,都會觸發 mouseover 事件。對應mouseout
只有在鼠標指針穿過被選元素時,才會觸發 mouseenter 事件。對應mouseleave
3.2 事件對象
當事件發生時,事件對象中保存了很多信息,如點擊的坐標。 $event
固定的名字
示例:
3.3 事件修飾符
- stop:阻止冒泡
- prevent:阻止默認事件
- capture:冒泡改為捕獲
- self:只處理發生在自己身上的事件,不理會冒泡或捕獲(把self放到誰的身上,誰就不會觸發)
- once:只執行一次
示例:
3.4 鍵盤事件修飾符
- keyCode 鍵盤修飾符
示例:
- 自定義按鍵名稱
// 自定義按鍵名稱
Vue.config.keyCodes.ent = 13;
// 頁面引用
<input type="text" @keyup.ent="enter_click"/>
4. 組件
4.1 全局組件
全局組件 : 定義全局組件,在每個組件中都可以進行引用
語法:
Vue.component("組件名",{template:"組件內容"})
示例:
4.2 局部組件:
組件:三部曲
- 定義組件
- 注冊組件
- 使用組件
示例:
5. 組件之間的數據傳遞
5.1 父傳子
父傳子 : 父中有數據,傳遞給子,
步驟:
1,確定父中有數據 2,在父組件的模板中通過屬性綁定把數據綁到子組件上 3,在子組件中定義props屬性,用來接收父傳遞過來的數據 4,在子組件的模板就可以使用接收過來的數據了
示例:
屬性校驗:
總結:
父綁定數據 子接收數據
5.2 子傳父
過程:
- 在父組件模板中,給子組件添加一個事件監聽
- 在子組件中,某個時間通過
this.$emit
發出這個事件,發出事件的同時就可以攜帶數據- 當父中的方法觸發,數據作用這個方法的第一個參數
示例:
6. vue腳手架
6.1 腳手架的安裝
- 安裝node
2. 安裝nrm
npm i nrm -g
-
切換安裝源
查看安裝源
nrm ls
切換安裝源 nrm use taobao
安裝vue的腳手架
npm i -g @vue/cli
- 創建vue項目
vue create myvue
- 進入項目
cd myvue
- 啟動項目
npm run serve
- 項目目錄
6.2 組件的使用
- 組件的定義
2. 組件的使用(main.js主接口)
7. router(路由)的使用
7.1 基本路由
html代碼
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 組件來導航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
</div>
script代碼
// 1\. 定義 (路由) 組件。
// 可以從其他文件 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2\. 定義路由
// 每個路由應該映射一個組件。 其中"component" 可以是
// 通過 Vue.extend() 創建的組件構造器,
// 或者,只是一個組件配置對象。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3\. 創建 router 實例,然后傳 `routes` 配置
// 你還可以傳別的配置參數, 不過先這么簡單著吧。
const router = new VueRouter({
routes // (縮寫) 相當于 routes: routes
})
// 4\. 創建和掛載根實例。
// 記得要通過 router 配置參數注入路由,
// 從而讓整個應用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 現在,應用已經啟動了!
通過路由
我們可以在任何組件內通過
this.$router
訪問路由器,也可以通過his.$route
訪問當前路由:
7.2 嵌套路由
- 嵌套路由的組件
- router的注冊
7.3 動態路由
- list列表 需要動態跳轉的列表
- router.js中對路由進行相關的配置
- 調轉頁面對數據進行獲取
7.4 編程路由
格式
router.push(location, onComplete?, onAbort?)
注意:
在 Vue 實例內部,你可以通過
$router
訪問路由實例。因此你可以調用this.$router.push
。
示例:
7.5 重定向
示例:
8. axios的使用
- 安裝axios
npm install axios
- 引入axios
import axios from 'axios';
- axios的簡單使用
9. vue中的生命周期方法
當vue的實例創建時,會伴隨一系列的方法運行,稱作生命周期函數
9.1 beforeCreate()
- 這是第一個生命周期函數,表示實例完全被創建之前會被執行
- 該方法執行時,data和methods中的數據還沒有初始化
9.2 created()
- 該方法執行時,data與mathods中的數據已經初始化好了
- 要操作data,methods中的數據,最早只能在該處進行操作
9.3 beforeMount()
- 表示模板已經在內存中編輯完成,但尚未將模板渲染到頁面中
- 該方法執行時,頁面中的元素沒有真正替換過來,只是一些模板字符串
9.4 mounted()
- 表示內存中的模板,已經掛載到頁面中,用戶可以看到渲染后的頁面
- 如果通過某些插件操作頁面上的DOM節點,最早在該方法中執行
9.5 beforeUpdate()
- 表示:當前頁面沒有更新,但是數據已經更新
9.6 updated()
- 表示:頁面和數據均已經更新
9.7 beforeDestory()
- 實例從運行階段進入銷毀階段,此時實例中的東西仍處于可用狀態
9.destoryed()
- 所有組件完全被銷毀
10. vue中組件之間的傳值方式
10.1 props 與 $emit
父組件向子組件傳遞數據是通過prop傳遞的,子組件傳遞數據給父組件是通過$emit觸發事件來做到的。
props 與 $emit的簡單使用
注意
: 使用$emit 觸發父類綁定的方法時,觸發的名稱必須全部是小寫,若父類綁定使用到小駝峰,則在觸發時,全部變成小寫,駝峰之間用-隔開
10.2 attrs和listeners
可以實現父組件與孫子組件之間的數據的傳遞 this.attrs如果子接受的數據沒有用到,把數據保存在attrs中
$attrs的簡單使用
特別提醒
父組件中所綁定的傳給父組件的屬性,都存放在$attrs中,若在子組件中不接收,直接進行綁定,可以使用:
v-bind="this.$attars"
$listenners的簡單使用
觸發父傳遞的click事件: @click="listeners.click()"觸發父傳遞多個事件:v-on="listeners"
10.3 parent與children
-
$parent 獲取父組件的實例,可以以此來調用父組件中的方法。
- 示例:
this.$parent.cut();
-
$children 獲取所有的兒子, 可以以此來獲取子組件中的數據
- 示例:
this.$children[0].msg = "張三"
特別提醒
parent: 獲取的是父親的實例children:獲取的是所有的子組件的實例
children:獲取的是所有子組件的實例
10.4 provice 與 inject的使用
10.5 refs的使用
ref 與refs是成對使用 ref 用于定義 $refs用戶獲取
10.6 自定義$dispatch
$dispatch
是掛載到Vue實例
上的一個方法, 自動向上
父類中查找觸發的方法,如果該方法存在就觸發
示例
10.7 事件總線eventBus
原理
事件總線是,在vue的
原型
上,掛載一個$eventBus
事件(名字自己起),通過$on
進行綁定事件, 先在事件中心中注冊一些事件 在需要的位置就可以通過$emit
去發布事件(觸發事件)
示例
10.8 數據傳遞的語法糖
在數據進行傳遞的時候,數據的傳遞與觸發的方法結合,可以有比較簡便的語法糖
,更加方便程序的開發,但是與此同時也有一定的難度,不是很容易懂。下面就簡單的介紹幾種語法糖。
10.8.1 .sync
語法糖
.sync
是@update:data
的語法糖,data
是vue中data中的數據
在給子類傳遞數據的時候,通過.sync
對屬性進行限定,在子類中可以直接觸發update:數據名稱
來修改父類中對應的數據,該方法可以省去父類中修改屬性的方法。
沒有使用.sync
之前
- 傳遞數據,綁定屬性
- 修改數據值,綁定修改的方法
- 觸發綁定的修改方法,調用修改方法
示例
使用.sync
之后
- 傳遞數據,綁定屬性.sync
- 觸發update:數據名,直接修改數據
沒有簡化: 簡化后:
示例
特別注意
update是規定的觸發的方法,update冒號后面跟的必須是父類中要修改的數據的數據名
10.8.2 v-model
語法糖
v-model
是:value
和@input
的語法糖,綁定的屬性必須是value
在給子類傳遞數據的時候,直接使用v-model
進行綁定,在子類中,可以觸發input
事件,來達到修改數據的目的
示例
特別注意
v-model
相當于:value
+@input
相當于上述方法的簡寫
11 vue中數據監控的原理(數據劫持)
數據監控: : 監控數據的獲取與改變,可以簡稱為數據劫持。
vue中data數據的監控原理:
代碼如下:
// 數據的監控,監控數據的獲取與改變
// vue中data數據的監控原理
obj = {
name: "wangcai",
age:18
};
function obServe(obj){
if(typeof obj ``= "object"){
for(key in obj){
defineReactive(obj,key,obj[key]);
}
}
}
function defineReactive(obj,key,value){
obServe(value);
Object.defineProperty(obj,key,{
get(){
console.log("get...");
return value;
},
set(val){
console.log('set... :');
obServe(val);
value = val;
}
})
}
// defineProperty是數組是無效的
//解決方式如下:
// vue中封裝了數據的所有的方法,此處只做列舉
let arr = ["push","slice","shift","unshift"]
arr.forEach(method=>{
let old = Array.prototype[method];
Array.prototype[method] = function(value){
console.log("set...")
old.call(this,value)
}
})
//-----------------------------------------------------------
// 測試數組
// observer(obj)
// obj.age = [1,2,3] // set..
// obj.age.push(4) // 設置值 defineProperty對數據是無效的
//-----------------------------------------------------------------
// 測試簡單的對象
// obServe(obj)
// console.log(obj.name) //get...
// obj.name = "hello" // set...
// 測試嵌套的對象
// observer(obj)
// obj.name // get...
// obj.name = "hello" // set...
// obj.age = { k:"kkkk" } // set...
// obj.age.k = "mmmm" // set...
12. 路由跳轉的傳值方式
在vue的路由跳轉中有兩種方式,分別是問號模式,和冒號模式,兩者不能進行混合使用,
12.1 問號傳值方式
格式
傳值
:<router-link to="/user/detail?id=1">用戶1</router-link>
獲取值
:{{this.$route.query.id}}
注意
:使用問號進行傳值的時候不需在router中特別設置路由
12.2 冒號傳值方式
格式
傳值
:<router-link to="/user/detail/2">用戶2</router-link>
配置router路由文件
path:"detail/:id",
獲取值
:{{this.$route.params.id}}
13. 路由的生命周期方法
13.1 全局路由守衛
在全局中有三個路由守衛,分別是beforeEach
,beforeResolve
,afterEach
-
beforeEach
- 路由正在開始發生改變的時候開始調用。
- 格式:
router.beforeEach((to, from, next) => {}
-
beforeResolve
- 所有組件中的路由守衛解析完畢之后,被調用
- 格式:
router.beforeResolve((to, from, next) => {}
-
afterEach
- 當前的路由進入完畢之后,被調用
- 全局后置鉤子,不接受next函數
- 格式:
router.afterEach((to, from) => {}
13.2 路由獨享的守衛
- beforeEnter
- 當進入到路由的配置中,被調用
格式:
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
13.3 組件內的守衛
在組件的內部存在整合三個路由組件,分別是beforeRouteEnter
、beforeRouteUpdate
、beforeRouteLeave
-
beforeRouteEnter
- 在進入組件之前,被調用,
- 此時的組件實例沒有被創建,
不能
獲取組件實例this
- 示例:
-
beforeRouteUpdate
- 當前路由發生改變的時候,
- 舉例來說,對于一個帶有動態參數的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉的時候,
- 可以訪問組件實例
this
- 格式:
beforeRouteUpdate ((to, from, next) => {}
-
beforeRouteLeave
- 當離開該組件的時候被調用,
- 可以訪問組件實例
this
- 格式:
beforeRouteLeave((to, from, next) => {}
13.4 總結
- 導航被觸發。
beforeEach
- 在失活的組件里調用離開守衛
beforeRouterLeave
。 - 調用全局的
beforeEach
守衛。 - 在重用的組件里調用
beforeRouteUpdate
守衛 (2.2+)。 - 在路由配置里調用
beforeEnter
。 - 解析異步路由組件。
- 在被激活的組件里調用
beforeRouteEnter
。 - 調用全局的
beforeResolve
守衛 (2.5+)。 - 導航被確認。
- 調用全局的
afterEach
鉤子。 - 觸發 DOM 更新。
- 用創建好的實例調用
beforeRouteEnter
守衛中傳給 next 的回調函數。
14 vue.config的簡單配置
14.1 vue的簡單配置+前端代理解決跨域
源碼
// 基于node的 node不支持import語法
// 默認環境變量 NODE_ENV 生產環境 production development
let path = require('path');
module.exports = {
// 配置開發環境(npm run serve)或生產環境(npm run build)url
publicPath:process.env.NODE_ENV ``= 'production'? 'http://www.abcd.cn':'/',
//打包后的資源放入的文件夾,默認未放入文件夾
assetsDir:'asserts',
//打包后生成的文件夾,默認是dist
outputDir:'./dist',
// 是否使用自己的內部模板 一般不使用
runtimeCompiler:false,
// 打包后刪除生成的.map文件 不再使用sourcemap
productionSourceMap:false,
chainWebpack:config=>{
// 可以獲取到webpack的配置 在增加一些自己的邏輯
// 配置目錄別名 別名叫+
config.resolve.alias.set('_c',path.resolve(__dirname,'src/components'));
config.resolve.alias.set('_v',path.resolve(__dirname,'src/views'));
},
//webpack配置,到時候會合并到默認的webpack中。
configureWebpack:{ // webpack-merge
plugins:[],
module:{}
},
// 開發 服務時使用 上線時不需要 解決跨域的問題
devServer:{
proxy:{
'/api/getUser':{
target:'http://localhost:3000',
pathRewrite:{
'/api':''
}
}
}
},
//第三方插件的配置
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.resolve(__dirname,'src/assets/common.less')
]
}
}
}
14.2 后端代理解決跨域問題
源碼
let express = require('express');
let app = express();
// 在后端配置,讓所有的人都可以訪問我的api接口
app.use('*', function (req, res, next) {
// 允許哪些客戶端來訪問我
res.setHeader("Access-Control-Allow-Origin","*");
// 允許可以添加哪些頭,然后來訪問我
res.setHeader("Access-Control-Allow-Headers","*");
// res.header('Access-Control-Allow-Headers', 'Content-Type,Authorization');
// 允許哪些方法來訪問我
res.setHeader("Access-Control-Allow-Methods","OPTIONS,PUT,DELETE");
// res.header('Access-Control-Allow-Methods', '*');
// 可以每隔半小時,來發送一個options請求--試探請求
res.setHeader("Access-Control-Max-Age","1800");
// 請求的類型編碼
res.header('Content-Type', 'application/json;charset=utf-8');
// 允許客戶端攜帶憑證,處理cookie信息,如果有,并且不對每次請求都新開一個session
res.setHeader("Access-Control-Allow-Credentials",true);
next();
});
15. 路由元信息
路由的元信息一般可用于權限的校驗
定義路由的時候可以配置 meta
字段
配置meta字段,該字段配置為對象信息
一個路由匹配到的所有路由記錄會暴露為 $route
對象 (還有在導航守衛中的路由對象) 的 $route.matched
數組。因此,我們需要遍歷 $route.matched
來檢查路由記錄中的 meta
字段。
示例:
</article>