Vue3之路由的元數(shù)據(jù)信息meta詳解
更新時(shí)間：2024年05月08日 11:13:15 作者：NorthCastle
這篇文章主要介紹了Vue3之路由的元數(shù)據(jù)信息meta詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
什么是 meta？
簡(jiǎn)單的理解，meta 就是路由對(duì)象 的一個(gè)屬性對(duì)象，
可以 通過這個(gè) 屬性給 路由對(duì)象添加 一些必要的屬性值，
在使用路由對(duì)象時(shí)可以獲取到這個(gè)屬性型對(duì)象，從而進(jìn)行一些其他的邏輯判斷。
meta 這個(gè)非常的簡(jiǎn)單，就是一個(gè)屬性值。
使用案例
給某個(gè)路由配置 meta 對(duì)象
在 路由的解析守衛(wèi) 和 組件中 獲取meta 中的值
路由的配置
// 導(dǎo)入 定義路由的兩個(gè)方法
import {createRouter,createWebHistory} from 'vue-router'
// 引入組件
import componentC from "./componentC.vue";
// 聲明路由跳轉(zhuǎn)的路徑與組件的對(duì)應(yīng)關(guān)系
const routsList = [
{
path:'/c',
name:'croute',
component:componentC,
meta:{
meta1 : '元數(shù)據(jù)1',
meta2 : true,
meta3 : 1000
}
}
]
// 創(chuàng)建路由的實(shí)例對(duì)象
const routerConfigObj = createRouter({
history:createWebHistory('abc'), // 帶一個(gè)參數(shù)，表示是路由的一個(gè)前綴
routes:routsList // 指定路由的配置列表
})
// 全局解析守衛(wèi)
routerConfigObj.beforeResolve((to,from)=>{
console.log('解析守衛(wèi) ： to : ',to)
console.log('解析守衛(wèi) ：from : ',from)
console.log('------')
return true
})
// 導(dǎo)出路由的對(duì)象
export default routerConfigObj;
運(yùn)行效果
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue Element前端應(yīng)用開發(fā)之功能點(diǎn)管理及權(quán)限控制
在一個(gè)業(yè)務(wù)管理系統(tǒng)中，如果我們需要實(shí)現(xiàn)權(quán)限控制功能，我們需要定義好對(duì)應(yīng)的權(quán)限功能點(diǎn)，然后在界面中對(duì)界面元素的功能點(diǎn)進(jìn)行綁定，這樣就可以在后臺(tái)動(dòng)態(tài)分配權(quán)限進(jìn)行動(dòng)態(tài)控制了，權(quán)限功能點(diǎn)是針對(duì)角色進(jìn)行控制的，也就是簡(jiǎn)稱RBAC（Role Based Access Control）。2021-05-05
對(duì)類Vue的MVVM前端庫的實(shí)現(xiàn)代碼
這篇文章主要介紹了對(duì)類Vue的MVVM前端庫的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
本文主要介紹了vue-socket.io使用教程與踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue中自定義右鍵菜單插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue增加強(qiáng)緩存和版本號(hào)的實(shí)現(xiàn)方法
這篇文章主要介紹了vue增加強(qiáng)緩存和版本號(hào)的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue electron前端開啟局域網(wǎng)接口實(shí)現(xiàn)流程詳細(xì)介紹
用electron寫了一個(gè)自己用的小軟件，無后端，純本地的數(shù)據(jù)。最近想著開發(fā)一個(gè)手機(jī)端app，將PC端的數(shù)據(jù)進(jìn)行同步。為了這小小的功能單獨(dú)寫個(gè)后端又麻煩。干脆前后端不分離哈哈，直接在前端軟件中開啟接口2022-10-10
websocket+Vuex實(shí)現(xiàn)一個(gè)實(shí)時(shí)聊天軟件
這篇文章主要利用websocked 建立長(zhǎng)連接，利用Vuex全局通信的特性，以及watch,computed函數(shù)監(jiān)聽消息變化，并驅(qū)動(dòng)頁面變化實(shí)現(xiàn)實(shí)時(shí)聊天，感興趣的可以了解一下2021-08-08
本文分步驟給大家介紹了基于vue cli重構(gòu)多頁面腳手架過程，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2018-01-01
這篇文章主要介紹了VUEX?使用?mutations的兩種方式,實(shí)現(xiàn)方式就是利用vuex中的mutations，在mutations中定義一個(gè)方法，這個(gè)方法就是把點(diǎn)擊的index（也就是每個(gè)列表的唯一標(biāo)識(shí)），傳給state中的當(dāng)前標(biāo)識(shí)，需要的朋友可以參考下2023-01-01
vuejs使用遞歸組件實(shí)現(xiàn)樹形目錄的方法
本篇文章主要介紹了vuejs使用遞歸組件實(shí)現(xiàn)樹形目錄的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09