《前端》el-menu导航栏实现方法--2021年1月3日

最新推荐文章于 2024-09-09 12:43:01 发布

bellediao

最新推荐文章于 2024-09-09 12:43:01 发布

阅读量755

点赞数

分类专栏：前端 VUE.JS #问题解决

本文链接：https://blog.csdn.net/bellediao/article/details/112131220

版权

本文介绍了在不使用vue-router的情况下，如何在HTML文件中实现Vue导航栏页面跳转。通过分析项目场景和问题，提出了两种解决方案：1) 使用window.location.href结合html页面实现跳转；2) 利用v-if进行条件渲染切换页面。并提供了完整代码示例和界面效果展示。

摘要由CSDN通过智能技术生成

项目场景和问题描述：

之前做的全供应链看板，不同页面是用页签实现的。现在领导要求用导航栏的方式展现。我当时觉得手册有案例应该很简单，但是，把自己🕳了，做导航栏很简单，但不同页面怎么跳转呢？网上查别人博文都是用router，但是我怎么都不成功。

原因分析：

后来可利说，我这是在html文件中，不能使用vue-router。等今年我要学会webpack打包项目的那种方式。现在先使用html能支持的方式来实现。

两种解决方案：

我能实现到的地方-实现不了点击导航栏在右侧出页面内容

<body>
    <div id="menu">
        <el-col :span="3">
            <el-menu :default-active="0" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
                <el-submenu :index='menuItem.i' v-for="(menuItem ,i) in menuData" :key="i">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>{
  {menuItem.title}}</span>
                    </template>
                    <el-menu-item-group v-for="(submenuItem,subi) in menuData[i].subMenu" :key="menuItem.router">
                        <el-menu-item :index="submenuItem.subi" >{
  {submenuItem.title}}
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-col>
        <el-col :span="8">
            <div class=content>   </div>
        </el-col>
    </div>
    <script> 
        var vm = new Vue({
    
            el: "#menu",
            data: {
    
                menuData: [{
    
                    i: '1',
                    title: '全供应链',
                    subMenu: [{
    
                        subi: '1-1',
                        title: '物资跟踪',
                        router: '/wz',
                    }, {
    
                        subi: '1-2',
                        title: '库存分析',
                        router: '/kc',
                    }]
                }, {
    
                    i: '2',
                    title: '外协生产',
                    subMenu: [{
    
                        subi: '2-1',
                        title: '外协进度',
                        router: '/jd',
                    }, {
    
                        subi: '2-2',
                        title: '外协分析',
                        router: