欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3實現(xiàn)動態(tài)路由及菜單

 更新時間:2024年03月04日 16:22:52   作者:左直拳  
這篇文章主要介紹了vue3實現(xiàn)動態(tài)路由及菜單,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一般來說,前端項目中的路由,很有可能是需要動態(tài)注冊的。

因為菜單可能在管理系統(tǒng)中維護,還跟權(quán)限綁定,用戶登錄以后,需要動態(tài)展示菜單。

菜單往往跟路由掛鉤,因此,路由需要動態(tài)注冊。

具體如何實現(xiàn)呢?

思路是,系統(tǒng)只提供默認的路由,登錄以后,讀入菜單/路由數(shù)據(jù),加載。

這其中,可能會出現(xiàn)默認路由與動態(tài)路由有重疊的情況。

處理辦法是覆蓋。數(shù)據(jù)結(jié)構(gòu)方面,菜單與路由數(shù)據(jù)二合一。

一、項目結(jié)構(gòu)

這是我們一個項目的公共框架的代碼結(jié)構(gòu)。

我們打算在src/modules/存放具體業(yè)務系統(tǒng)的代碼,而外部是相對穩(wěn)定,可以復用的框架代碼。

二、默認路由

src/router/default.js,內(nèi)容比較少,只有登錄、首頁、404三個。其余全都靠動態(tài)注冊。

路由項中,自定義屬性放在meta里。動態(tài)路由與默認路由的數(shù)據(jù)結(jié)構(gòu)一致。

/**
 * 默認路由
 * 具體業(yè)務路由,應在src/modules/router里定義,或者從后端動態(tài)加載
 */
export default [
  /**
   * 路由項結(jié)構(gòu):
   *{
      path: "/",//路徑,(必選;path、name、component是路由規(guī)定必選的元素)
                  也可以帶參數(shù),如 path: "/resource/detail/:id",
      name: "路由名稱,是路由唯一標識",(必選)
      component: 指向組件,如 Home,或者() => import("../views/login/PageIndex.vue"),(必選)
      meta: {//meta里的屬性可以自定義,全部為可選項
        text: "名稱",//展示在菜單里,(可選)
        navi: true, //導航條(一級菜單),(可選)
        noLogin: true, //無須登錄即可瀏覽,(可選)
        access: "work:sysmanage,work:resourcemanage",//權(quán)限標識,(可選)
      },
      children: [],
    },
   */
  {
    path: "/login",
    name: "login",
    component: () => import("../views/login/PageIndex.vue"),
    meta: {
      noLogin: true, //無須登錄即可瀏覽
    },
  },
  {
    path: "/",
    name: "Home",
    component: () => import("../views/PageIndex.vue"),
  },
  {
    path: "/notAllow",
    name: "notAllow",
    component: () => import("../views/sys/notAllow.vue"),
  },
];

export const HomeName = "Home";

三、動態(tài)注冊

注冊的時機是什么?在哪里注冊?怎么注冊?

答曰:登錄之后注冊;在路由守衛(wèi)里注冊;用router.addRoute()一個個加進去。

1、登錄之后進行注冊,在路由衛(wèi)士里注冊

所謂路由守衛(wèi),就是路由規(guī)則。這名字我是從網(wǎng)上抄過來的。

src/router/index.js

import { createRouter, createWebHashHistory } from "vue-router";
import routes from "./default";
import routeAssembler from "./setup";
import { hasAuthority } from "@/utils/login.js";

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 路由守衛(wèi)
let registerRouteFresh = true;//是否還沒有動態(tài)加載過
router.beforeEach((to, from, next) => {
  const isLogin = localStorage.isLogin ? true : false;
  if (isLogin) {
    //已登錄情況下驗證權(quán)限
    let isAccess = hasAuthority(to.meta.access);
    if (!isAccess) {//沒有權(quán)限
      next("/notAllow");
      return;
    }
    if (registerRouteFresh) {//還沒有動態(tài)加載過
      //動態(tài)注冊路由 <----------------------------------------
      routeAssembler(router);
      registerRouteFresh = false;
      next({ ...to, replace: true });
    } else {
      //已經(jīng)登錄了,不能再打開登錄頁
      to.path === "/login" ? next("home") : next();
    }
  } else {
    //如果無須登錄則直接打開,否則轉(zhuǎn)向登錄頁面
    to.meta.noLogin || to.path === "/login" ? next() : next("/login");
  }
});

export default router;

2、如何動態(tài)注冊

src/router/setup.js,即上面例子中的routeAssembler:

/*
  裝配路由及菜單
 */
import fixItems from "./default"; //默認路由
import { HomeName } from "./default"; //統(tǒng)一命名首頁路由項(參考前面的默認路由)
import projectItems from "@/modules/router"; //具體業(yè)務系統(tǒng)的路由

export default (router) => {
  //獲得動態(tài)路由
  const dynaItems = getDynamicItems();

  //對齊首頁(統(tǒng)一命名首頁)
  adpatHome(HomeName, dynaItems);

  //添加動態(tài)路由
  dynaItems.forEach((value) => {
    router.addRoute(value);
  });
};

const getDynamicItems = () => {
  /*
    獲取動態(tài)路由,從指定文件加載或從后端獲取
  */
  return projectItems;
};

//默認路由與業(yè)務路由對齊首頁的路由信息
//所謂對齊,就是大家的name保持一致,這樣才能保證動態(tài)加入的路由項,覆蓋掉前面的path和name相同的路由
const adpatHome = (HomeName, dynaItems) => {
  let home = dynaItems.filter((item) => {
    return item.path === "/";
  });
  if (home.length > 0 && home[0].name !== HomeName) {
    /**
     * 如果業(yè)務路由定義了首頁,但其name與默認路由首頁的name不相同
     * 則將業(yè)務路由中首頁項的name置為默認名稱
     * 因為按照vue-router的規(guī)則,addRoute的時候,如果存在同名同路徑的路由項,則覆蓋之
     * 我們要的就是覆蓋默認,以業(yè)務路由設(shè)置為準
     */
    home[0].name = HomeName;
  }
};

這里面有個如果動態(tài)路由,與默認路由中存在相同的路由項,該如何處理的問題。

按照vue3的router規(guī)則,如果后面加進來的路由項,僅僅是path相同,而name不同,則不算是相同的路由項,addRoute()進去之后,仍然是原先的路由項起作用;但如果是path和name都相同,則原先的會被覆蓋(我懷疑是name相同就會被覆蓋)。

所以,默認路由中有首頁路由,指向框架代碼中的默認首頁;加載動態(tài)路由后,該路由被覆蓋,指向了具體業(yè)務系統(tǒng)的首頁。這也表明,我們無須自己手動刪除已加載的同名路由項。

事實上,刪除還會報錯。

總結(jié)

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 基于vue 添加axios組件,解決post傳參數(shù)為null的問題

    基于vue 添加axios組件,解決post傳參數(shù)為null的問題

    下面小編就為大家分享一篇基于vue 添加axios組件,解決post傳參數(shù)為null的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue與django(drf)實現(xiàn)文件上傳下載功能全過程

    vue與django(drf)實現(xiàn)文件上傳下載功能全過程

    最近簡單的學習了django和drf上傳文件(主要是圖片),做一個記錄,下面這篇文章主要給大家介紹了關(guān)于vue與django(drf)實現(xiàn)文件上傳下載功能的相關(guān)資料,需要的朋友可以參考下
    2023-02-02
  • vue預覽本地pdf文件方法之vue-pdf組件使用

    vue預覽本地pdf文件方法之vue-pdf組件使用

    這篇文章主要介紹了vue預覽本地pdf文件方法之vue-pdf組件使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue中大屏適配和局部適配的方案總結(jié)

    Vue中大屏適配和局部適配的方案總結(jié)

    這篇文章主要為大家詳細介紹了如何通過Vue.js的Mixins功能結(jié)合JavaScript實現(xiàn)頁面內(nèi)容的自適應縮放,以適應不同比例的屏幕,需要的小伙伴可以參考下
    2025-03-03
  • 在 Vue 應用中使用 Netlify 表單功能的方法詳解

    在 Vue 應用中使用 Netlify 表單功能的方法詳解

    Netlify 帶有內(nèi)置表單處理功能,可以用來存儲表單數(shù)據(jù),下載 csv 文件,同時可以在接收到新的提交時發(fā)送郵件通知或者通過配置 webhook 發(fā)送請求。這篇文章主要介紹了在 Vue 應用中使用 Netlify 表單功能,需要的朋友可以參考下
    2019-06-06
  • webpack安裝配置與常見使用過程詳解(結(jié)合vue)

    webpack安裝配置與常見使用過程詳解(結(jié)合vue)

    這篇文章主要介紹了webpack安裝配置與常見使用過程,主要結(jié)合vue實現(xiàn),通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-06-06
  • Vue3項目中的hooks的使用教程

    Vue3項目中的hooks的使用教程

    今天我們稍微說一下 vue3 項目中的 hooks 的使用,其實這個 hooks 呢是和 vue2 當中的 mixin 是類似的,學習過 vue2 的小伙伴一定對 mixin 一定比較熟悉,快跟隨小編一起來學習學習吧
    2022-08-08
  • Vue 實現(xiàn)樹形視圖數(shù)據(jù)功能

    Vue 實現(xiàn)樹形視圖數(shù)據(jù)功能

    這篇文章主要介紹了Vue 實現(xiàn)樹形視圖數(shù)據(jù)功能,利用簡單的樹形視圖實現(xiàn)的,在實現(xiàn)過程中熟悉了組件的遞歸使用,感興趣的朋友跟隨腳本之家小編一起學習吧
    2018-05-05
  • vue3(vite)設(shè)置代理封裝axios api解耦功能

    vue3(vite)設(shè)置代理封裝axios api解耦功能

    這篇文章主要介紹了vue3(vite)設(shè)置代理封裝axios api解耦,本文結(jié)合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-12-12
  • vue 里面使用axios 和封裝的示例代碼

    vue 里面使用axios 和封裝的示例代碼

    本篇文章主要介紹了vue 里面使用axios 和封裝的示例代碼,非常具有實用價值,需要的朋友可以參考下
    2017-09-09

最新評論