vue-router中關(guān)于meta的作用及說(shuō)明
vue-router中meta的作用
meta的定義：
簡(jiǎn)單來(lái)說(shuō)就是路由元信息，也就是每個(gè)路由身上攜帶的信息。
meta的作用：
vue-router路由元信息說(shuō)白了就是通過(guò)meta對(duì)象中的一些屬性來(lái)判斷當(dāng)前路由是否需要進(jìn)一步處理，如果需要處理，按照自己想要的效果進(jìn)行處理即可
定義路由的時(shí)候可以配置 meta 字段：
const router = new VueRouter({
? routes: [
? ? {
? ? ? path: '/foo',
? ? ? component: Foo,
? ? ? children: [
? ? ? ? {
? ? ? ? ? path: 'bar',
? ? ? ? ? component: Bar,
? ? ? ? ? // a meta field
? ? ? ? ? meta: { requiresAuth: true }
? ? ? ? }
? ? ? ]
? ? }
? ]
})那么如何訪問(wèn)這個(gè) meta 字段呢？
首先，我們稱(chēng)呼 routes 配置中的每個(gè)路由對(duì)象為 路由記錄。路由記錄可以是嵌套的，因此，當(dāng)一個(gè)路由匹配成功后，他可能匹配多個(gè)路由記錄
例如，根據(jù)上面的路由配置，/foo/bar 這個(gè) URL 將會(huì)匹配父路由記錄以及子路由記錄。
一個(gè)路由匹配到的所有路由記錄會(huì)暴露為 $route 對(duì)象 (還有在導(dǎo)航守衛(wèi)中的路由對(duì)象) 的 $route.matched 數(shù)組。因此，我們需要遍歷 $route.matched 來(lái)檢查路由記錄中的 meta 字段。
下面例子展示在全局導(dǎo)航守衛(wèi)中檢查元字段：
router.beforeEach((to, from, next) => {
? if (to.matched.some(record => record.meta.requiresAuth)) {
? ? // this route requires auth, check if logged in
? ? // if not, redirect to login page.
? ? if (!auth.loggedIn()) {
? ? ? next({
? ? ? ? path: '/login',
? ? ? ? query: { redirect: to.fullPath }
? ? ? })
? ? } else {
? ? ? next()
? ? }
? } else {
? ? next() // 確保一定要調(diào)用 next()
? }
})vue-router中元信息meta的妙用
{
? ? path:"/test",
? ? name:"test",
? ? component:()=>import("@/components/test"),
? ? meta:{
? ? ? ? title:"測(cè)試頁(yè)面", //配置title
? ? ? ? keepAlive: true //是否緩存
? ? }
}配置此路由的標(biāo)題title
//main.js中的代碼
router.beforeEach((to,from,next)=>{
? ? if(to.meta.title){
? ? ? ? document.title=to.meta.title
? ? }
? ? next()
})配置組件是否需要緩存
<!-- app.vue中的代碼 --> <!-- 需要被緩存的路由入口 --> <keep-alive> ? ? ? <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <!-- 不需要被緩存的路由入口 --> <router-view v-if="!$route.meta.keepAlive"></router-view>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3項(xiàng)目實(shí)現(xiàn)前端導(dǎo)出Excel的示例代碼
這篇文章主要介紹了Vue3項(xiàng)目實(shí)現(xiàn)前端導(dǎo)出Excel的示例,在vue3的項(xiàng)目中導(dǎo)出Excel表格的功能,可以借助xlsx庫(kù)來(lái)實(shí)現(xiàn),下面是詳細(xì)的操作步驟,需要的朋友可以參考下2025-01-01
vue項(xiàng)目使用modbus實(shí)現(xiàn)串口通訊的示例代碼
本文主要介紹了vue項(xiàng)目使用modbus實(shí)現(xiàn)串口通訊的示例代碼,可以實(shí)現(xiàn)與Modbus設(shè)備的數(shù)據(jù)交互,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
利用Vue3+Element?Plus封裝公共表格組件(帶源碼)
最近公司項(xiàng)目中頻繁會(huì)使用到table表格,而且前端技術(shù)這一塊也用到了vue3來(lái)開(kāi)發(fā),所以基于element plus table做了一個(gè)二次封裝的組件,這篇文章主要給大家介紹了關(guān)于利用Vue3+Element?Plus封裝公共表格組件的相關(guān)資料,需要的朋友可以參考下2023-11-11
VUE單頁(yè)面切換動(dòng)畫(huà)代碼(全網(wǎng)最好的切換效果)
今天小編就為大家分享一篇VUE單頁(yè)面切換動(dòng)畫(huà)代碼(全網(wǎng)最好的切換效果)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
解決Antd 里面的select 選擇框聯(lián)動(dòng)觸發(fā)的問(wèn)題
這篇文章主要介紹了解決Antd 里面的select 選擇框聯(lián)動(dòng)觸發(fā)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
利用Vue實(shí)現(xiàn)移動(dòng)端圖片輪播組件的方法實(shí)例
輪播圖是前端很常用的一個(gè)網(wǎng)頁(yè)特效，幾乎所有的網(wǎng)站或多或少都會(huì)用到這個(gè)特效。下面這篇文章主要給大家介紹了關(guān)于利用Vue實(shí)現(xiàn)移動(dòng)端圖片輪播組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-08-08
在Web開(kāi)發(fā)中,跨域問(wèn)題是一大挑戰(zhàn),跨域是指網(wǎng)絡(luò)請(qǐng)求從一個(gè)域名發(fā)起,而請(qǐng)求的目標(biāo)資源位于另一個(gè)不同的域名下,通常使用Vue CLI的代理來(lái)解決跨域問(wèn)題,而在生產(chǎn)環(huán)境中,可以通過(guò)后端配置CORS或使用Nginx反向代理,或者通過(guò)服務(wù)器中轉(zhuǎn)來(lái)解決跨域問(wèn)題2023-10-10
vue自動(dòng)路由-單頁(yè)面項(xiàng)目（非build時(shí)構(gòu)建）
這篇文章主要介紹了vue自動(dòng)路由-單頁(yè)面項(xiàng)目（非build時(shí)構(gòu)建）,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue自定義Form組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-10-10
vue element-ui里的table中表頭與表格出現(xiàn)錯(cuò)位的解決
這篇文章主要介紹了vue element-ui里的table中表頭與表格出現(xiàn)錯(cuò)位的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08