vue3實(shí)現(xiàn)動(dòng)態(tài)添加路由

更新時(shí)間：2024年04月25日 11:14:59 作者：m0_74019046

這篇文章主要介紹了vue3實(shí)現(xiàn)動(dòng)態(tài)添加路由方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

動(dòng)態(tài)路由的設(shè)置

1.登入后獲取后端返回的路由，并存入localStorage中

  const menu = [
        {
          id: "1",
          name: "系統(tǒng)總攬",
          type: 1,
          url: "/main/1",
          icon: "el-icon-ship",
          children: [
            { id: "11", name: "1111", type: 1, url: "/main/first/1", icon: "" },
            { id: "12", name: "33", type: 1, url: "/main/first/2", icon: "" }
          ]
        },

        {
          id: "2",
          name: "系統(tǒng)管理",
          type: 1,
          url: "/main/4",
          icon: "el-icon-moon",
          children: [
            { id: "21", name: "系統(tǒng)xx", type: 1, url: "/main/two/1", icon: "" },
            { id: "22", name: "系統(tǒng)11", type: 1, url: "/main/two/2", icon: "" }
          ]
        },

        {
          id: "3",
          name: "商品中心",
          type: 1,
          url: "/main/7",
          icon: "el-icon-lightning",
          children: [
            {
              id: "31",
              name: "系統(tǒng)zz",
              type: 1,
              url: "/main/three/1",
              icon: ""
            },
            {
              id: "32",
              name: "系統(tǒng)cc",
              type: 1,
              url: "/main/three/2",
              icon: ""
            }
          ]
        },
        {
          id: "8",
          name: "ad",
          type: 1,
          url: "/main/8",
          icon: "el-icon-goods",
          children: [
            { id: "9", name: "qqq", type: 1, url: "/main/four/1", icon: "" },
            { id: "10", name: "打算", type: 1, url: "/main/four/2", icon: "" }
          ]
        }
      ]
       // 存入pinia中
       this.userMenu = menu
       //封裝的localStorage
      localCache.setCache("userMenu", menu)

2.獲取本地的路由文件

   function getlocalRoute(){
       //routerRoute本地路由
      const routerRoute: RouteRecordRaw[] = []
      //  1.獲取 router/xx/xx.ts文件   import.meta.glob() vite提供的
      const route: Record<string, any> = import.meta.glob(
        "../../router/**/*.ts",
        { eager: true }
      )
     //2.把所有的路由添加到routerRoute中
      for (const key in route) {
        const module = route[key]
        console.log(module)
        routerRoute.push(module.default)
      }
      return    routerRoute
  }

通過 import.meta.glob() 導(dǎo)入的路由

default就是路由對象

routerRoute：

3. 添加路由

  let isFirst = true
  function (userMenu:any){
      //本地路由
      const localRoute = getlocalRoute()
      const routes:RouteRecordRaw[] = []
      // 匹配路由
      for(const menu of userMenu){
         for(const subMenu of menu.children ){
         //匹配到的子路由
         //route的結(jié)構(gòu)：{path: '/main/first/1', component: ?}
           const route =  localRoute.find((item) => item.path == subMenu.url)
           // 記錄第一個(gè)路由，進(jìn)入主頁后會(huì)跳轉(zhuǎn)到這個(gè)路由
           if(route && isFirst){
              isFirst = false
              // 封裝的  localStorage
            localCache.setCache("first", myRoute)
           }
           if(route){
              //給1級路由重定向到它的第一個(gè)子路由（只需要添加1次）
              //如果 routerRoute里沒有加過1級路由的話就需要添加1級路由，并重定向到他的第一個(gè)路由
              if(!routes.find((item) => item.path == menu.url)){
              // 這里的redirect:不能是 menu.children[0],有可能它沒有第一個(gè)子路由的權(quán)限
               routes.push({ path:menu.url, redirect: route .path })
              }
              // 添加路由
              routes.push(route)
           }
        }
     }
     return   routes
  } 
 //最終再添加到main下：
   router.addRoute("main", routes)

因?yàn)楂@取本地的路由文件刷新后會(huì)消失，在pinia中設(shè)置一個(gè)方法用來在頁面刷新后重新加載路由loadLocal 具體操作和上面添加路由的方式相同。

刷新頁面后，會(huì)重新加載 pinia，在pinia加載完后再加載本地?cái)?shù)據(jù)，添加路由

import { createPinia } from "pinia"
import useLoginStore from "./login/index"
import type { App } from "vue"
const pinia = createPinia()
function store(app: App<Element>) {
  //pinia加載完后才能使用store里面state、action和getters
  app.use(pinia)
  //pinia加載完后 加載本地?cái)?shù)據(jù)，添加路由
  const login = useLoginStore()
  login.loadLocal()
}
export default store

面包屑的使用

<div class="home">
    <el-breadcrumb :separator-icon="ArrowRight">
      <template v-for="item in menuList" :key="item.name">
        <el-breadcrumb-item :to="item.path">{{ item.name }}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>

<script setup lang="ts">
  const store = useLoginStore()
  const route = useRoute()
  const fun = () => {
  const list: any[] = []
  for (let menu of store.userMenu) {
    for (let child of menu.children) {
      //   獲取面包屑路由，并添加路由
      //當(dāng)前點(diǎn)擊的路由== 子路由
      if (child.url == route.path) {
        console.log(child.url)
        // 1級路由，之前注冊時(shí)設(shè)置1級路由會(huì)重定向到它的第一個(gè)子路由
        list.push({ name: menu.name, path: menu.url })
        //子路由 當(dāng)前點(diǎn)擊的路由
        list.push({ name: child.name, path: child.url })
      }
    }
  }
  //list [1級路由，子路由]
  return list
}
// 當(dāng)點(diǎn)擊的路由變化時(shí)會(huì)匹配新的面包屑的路由
const menuList = computed(() => {
  return fun()
})
</script>

路由的高亮

 <div class="main-menu">
    <el-row class="tac">
      <el-col>
        <el-menu
          :default-active="defaultActive"
          class="el-menu-vertical-demo"
          :unique-opened="true"
        >
          <template v-for="item in menu" :key="item.id">
            <el-sub-menu :index="item.id + ''">
              <template #title>
                <el-icon
                  ><component :is="item.icon.split('-icon-')[1]"
                /></el-icon>
                <span>{{ item.name }}</span>
              </template>
              <template v-for="child in item.children" :key="child.id">
                <el-menu-item-group>
                  <el-menu-item :index="child.id" @click="cli(child)">{{
                    child.name
                  }}</el-menu-item>
                </el-menu-item-group>
              </template>
            </el-sub-menu>
          </template>
        </el-menu>
      </el-col>
    </el-row>
  </div>

//拿到所有路由
const loginStore = useloginStore()
const menu = loginStore.userMenu
//當(dāng)前進(jìn)入頁面的路由
const route = useRoute()
// 點(diǎn)擊對應(yīng)的菜單或輸入路徑后，對應(yīng)的路由要高亮
const active = () => {
  for (const item of loginStore.userMenu) {
    console.log(route.path)
    for (const child of item.children) {
      //子路由 == 用戶輸入的路由
      if (child.url === route.path) {
        console.log(child.id)
        return child.id + ""
      }
    }
  }
  // 返回的默認(rèn)路由
  return "11"
}

let defaultActive = computed(() => {
  const defaults = active()
  return defaults
})

封裝模塊

配置項(xiàng)

const searchconfig = {
  formItems: [
    { type: "input", prop: "name", label: "部門名稱", placeholder: "xxx" },
    { type: "date-picker", prop: "date", label: "時(shí)間", placeholder: "xxx" },
    { type: "input", prop: "leader", label: "領(lǐng)導(dǎo)", placeholder: "xxx" },
    {
      type: "select",
      prop: "selects",
      label: "選擇",
      placeholder: "xxx",
      options: [
        { label: "1", value: 1 },
        { label: "2", value: 2 }
      ]
    }
  ]
}
export default searchconfig

遍歷配置項(xiàng)

  <div class="home">;;
    <div>
      <pageSerach @search="cli" :searchConfig="searchRef"></pageSerach>
    </div>
    <div>
      <pageContent :contentConfig="contentconfig">
        <template #name="scope">
          <span>xxx:{{ scope.row[scope.prop] }}</span>
        </template>
        <template #id="scope">
          <span>xxx:{{ scope.row[scope.prop] }}</span>
        </template>
      </pageContent>
    </div>
    <div>
      <pageBottom></pageBottom>
    </div>
  </div>

如果有些配置是從后端傳入的，例如option的value,可以這樣添加：

const searchRef = computed(() => {
  // 從后端獲取option的值,再給 searchconfig 里的option添加值
  console.log("xx")
  searchconfig.formItems.forEach((item) => {
    if (item.prop == "selects") {
      item?.options?.push({ label: "3", value: 3 })
    }
  })
  return searchconfig
})