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