Vue中的路由配置項(xiàng)meta使用解析
更新時(shí)間：2022年10月22日 15:21:09 作者：Are楊
這篇文章主要介紹了Vue中的路由配置項(xiàng)meta使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Vue路由配置項(xiàng)meta使用
meta簡單來說就是路由元信息 也就是每個(gè)路由身上攜帶的信息。
這里簡單的舉兩個(gè)例子
其次還有一個(gè)功能就是能夠控制公共組件的顯示或隱藏
請(qǐng)忽視 keep-alive標(biāo)簽
Vue路由中的meta問題
我們經(jīng)常會(huì)在進(jìn)入一個(gè)頁面時(shí)判斷是否已經(jīng)登陸，經(jīng)常會(huì)用到路由導(dǎo)航守衛(wèi)router.beforeEach(to, from, next), 一個(gè)兩個(gè)頁面還好，但是多的話，就會(huì)麻煩，并且路由還會(huì)嵌套。這時(shí)可以使用meta。
meta （元數(shù)據(jù)）
在配置路由時(shí)，經(jīng)常會(huì)用到path,name,component,還有一個(gè)就是meta 元數(shù)據(jù)，給每個(gè)路由添加一個(gè)自定義的meta對(duì)象，在meta對(duì)象中可以設(shè)置一些狀態(tài)，來進(jìn)行一些操作。經(jīng)常用它來做登錄校驗(yàn)。
{
? ? ? path: '/imgMove/:id',
? ? ? name: 'imgMove',
? ? ? meta: {
? ? ? ? requiresAuth: true
? ? ? },
? ? ? component: imgMove
? ? },
? ? { //作品頁面
? ? ? path: '/work',
? ? ? name: 'work',
? ? ? meta: {
? ? ? ? canNotLogin: true
? ? ? },
? ? ? component: work
? ? },我們需要校驗(yàn)判斷item下面的meta對(duì)象的requiresAuth是不是true,就可以進(jìn)行一些限制。
router.beforeEach((to, from, next) => {
? if (to.matched.some(function (item) {
? ? return item.requiresAuth
? })) {
? ? next('/login')
? } else?
? ? next()
})以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue.js -- 過濾器使用總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡單滑塊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
文章主要內(nèi)容是關(guān)于如何在項(xiàng)目中引入依賴項(xiàng)以及編寫組件代碼的步驟和總結(jié),作者分享了個(gè)人經(jīng)驗(yàn),旨在為讀者提供參考,并鼓勵(lì)大家支持腳本之家2024-12-12
詳解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Vue.js的指令是以v-開頭的，它們作用于HTML元素，指令提供了一些特殊的特性。這篇文章主要介紹了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相關(guān)知識(shí),需要的朋友可以參考下2018-10-10
Vue3 獲取當(dāng)前組件實(shí)例及場(chǎng)景分析
在Vue 3中,getCurrentInstance是一個(gè)用于獲取當(dāng)前組件實(shí)例的重要函數(shù),以下是對(duì)getCurrentInstance的詳細(xì)分析,感興趣的朋友一起看看吧2024-12-12
詳解vue中在父組件點(diǎn)擊按鈕觸發(fā)子組件的事件
這篇文章主要介紹了詳解vue中在父組件點(diǎn)擊按鈕觸發(fā)子組件的事件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例
這篇文章主要介紹了Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了如何利用vite快速搭建vue3項(xiàng)目問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
TypeScript 是一種由微軟開發(fā)的自由和開源的編程語言，它是 JavaScript 的一個(gè)超集，擴(kuò)展了 JavaScript 的語法。這篇文章主要介紹了Vue新搭檔TypeScript快速入門實(shí)踐,需要的朋友可以參考下2021-06-06
今天在寫項(xiàng)目掉接口的時(shí)候有一個(gè)接口需要到了用戶的ip地址,查了半天覺得這個(gè)方法不錯(cuò),下面這篇文章主要給大家介紹了關(guān)于vue前端通過騰訊接口獲取用戶ip的相關(guān)資料,需要的朋友可以參考下2022-12-12