动态路由的添加

最新推荐文章于 2024-05-23 17:34:08 发布

沈忘年

最新推荐文章于 2024-05-23 17:34:08 发布

阅读量112

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/ShenWangNian/article/details/131590753

版权

<template>
    <div id="app">
        <nav>
            <router-link v-for="item in menus"
             :to="item.path" :key="item.path" >{{item.name}}</router-link>
        </nav>
        <router-view/>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            menus:[]
        }
    },
    created() {
        // 登录之后
        // 获取菜单的信息
        axios.get("http://127.0.0.1:4523/m1/2978669-0-default/menu").then(res => {
            this.menus = res.data.menus
            this.menus.forEach(item=>{
                this.$router.addRoute({
                    name:item.name,
                    path:item.path,
                    component: () => import(/* webpackChunkName: "about" */ 
                                        `@/views${item.path}.vue`)
                })
            })
        })
    }
}
</script>