博客

json文件

router.json

[
    { 
        "path": "/" ,
        "redirect": "/index"
    },
      
    { 
        "path": "/index", 
        "name":"index",
        "component": "layout/index.vue" ,
        "redirect": "/home",
        "children":[
            { 
                "path": "/home", 
                "name":"home",
                "component": "views/home.vue",
                "meta":{
                    "title": "首页",
                    "icon": "House"
                }
            },
            { 
                "path": "/apexchart", 
                "name":"apexchart",
                "component": "views/apexchart.vue",
                "meta":{
                    "title":"图表",
                    "icon":"DataAnalysis"
                }
            },
            {
                "path": "/widget",
                "name": "widget",
                "component": "views/widget/index.vue",
                "meta":{
                    "title": "小组件",
                    "icon": "Wallet"
                },
                "children":[
                    {
                        "path": "/tableRelated",
                        "name": "tableRelated",
                        "component": "views/widget/tableRelated.vue",
                        "meta":{
                            "title": "表格相关",
                            "icon": "Memo"
                        }  
                    }
                ]
                    
                    
                
            },
            {
                "path": "/cssRelated",
                "name": "cssRelated",
                "component": "views/cssRelated/index.vue",
                "meta":{
                    "title": "CSS相关组件",
                    "icon": "Suitcase"
                }
            }
        ]
    },
    {
        "path":"/error",
        "name": "error",
        "component": "views/error.vue",
        "meta": {
            "title": "404页面"
        }
    },
    {
        "path": "/:catchAll(.*)",
        "redirect": "/error"
      }
      
]

路由

src\router\index.js

import { createRouter, createWebHistory } from 'vue-router'
import datas from "@/assets/json/router.json"

// 将 json 数据转换为一个普通数组
const menuData = JSON.parse(JSON.stringify(datas))

// 处理动态引入组件函数
const getComponent = (data) =>{
  data.map( item => {
    const url =  item.component
    item.component = ()=> import (`@/${url}`)

    // 处理多级路由
    if(item.children && item.children.length){
      getComponent(item.children)
    }
  })

  return data
}

// 获取处理后的理由数据
const routerData = getComponent(menuData)  
console.log('routerData',routerData);

// 配置路由

let router = createRouter({
    // 3.0 需要配置对应的路由模式
    history: createWebHistory(),
    // 配置路由
    routes: routerData
  })

  router.beforeEach(async (to) =>{
    console.log('111111',to);
  })
  // 暴露路由对象
  export default router

多级菜单组件

• Menu.vue

<template>
    <div  style="width: 100%;height:100%;">
        <el-menu :default-active="paths" router  style="height:100%;">
            <MenuTree :menuData="menuDatas"></MenuTree>
        </el-menu>
    </div>
</template>

<script >
import { useRoute } from "vue-router"
import datas from "@/assets/json/router.json"
import MenuTree from "./MenuTree.vue"

export default {
    name: 'Menu',
    components: {
        MenuTree
    },
    data() {
        return{
            menuDatas:"",
            paths:useRoute().path
        }
    },
    created() {
        let data = JSON.parse(JSON.stringify(datas)) 
            data = data.filter((item)=>{
                return item.name == "index"
            })
            this.menuDatas = data[0].children
            // console.log('MenuDatas1',this.menuDatas);
    },
    methods: {
    }
}
</script>

<style scoped lang='scss'>

</style>

• MenuTree.vue

<template>
    <div >
        <template v-for="(item, index) in menuData" :key="index">
            <!-- 无子目录 -->
            <el-menu-item v-if="!item.children" :index="item.path">
                <el-icon v-if="item.meta.icon">
                    <!-- <House /> -->
                    <component :is="item.meta.icon"></component>
                </el-icon>
                <span>{{ item.meta.title }}</span>
            </el-menu-item>

            <!-- 有子目录 -->
            <el-sub-menu :index="item.path" v-if="item.children">
                <template #title>
                    <el-icon v-if="item.meta.icon">
                        <component :is="item.meta.icon"></component>
                    </el-icon>
                    <span>{{ item.meta.title }}</span>
                </template>
                <MenuTree :menuData="item.children"></MenuTree>
            </el-sub-menu>
        </template>
    </div>
</template>

<script >
import MenuTree from "./MenuTree.vue"

export default {
    name: 'MenuTree',
    components: {
        MenuTree
    },
    props:["menuData"],
    data() {
        return{
            
        }
    },
    created() {
    },
    methods: {
        
    }
}
</script>

<style scoped lang='scss'>

</style>