vue+Element左树导航右内容区页面跳转

心已赠人 2023-08-17 17:40 125阅读 0赞

首先在项目中添加Element UI

npm i element-ui -S

修改main.js

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    Vue.use(ElementUI)
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

HelloWorld.vue

<template>
      <div class="indexPage">
        <div class="containerWrapper">
          <div class="sidebarWrapper">
            <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="collapseStatus">
              <el-menu-item index="0">
                <i class="el-icon-menu"></i>
                <span slot="title">工作平台</span>
              </el-menu-item>
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span slot="title">导航一</span>
                </template>
                <el-menu-item-group>
                  <span slot="title">分组一</span>
                  <el-menu-item index="1-1">选项1</el-menu-item>
                  <el-menu-item index="1-2">选项2</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="分组2">
                  <el-menu-item index="1-3">选项3</el-menu-item>
                </el-menu-item-group>
                <el-submenu index="1-4">
                  <span slot="title">选项4</span>
                  <el-menu-item index="1-4-1">选项1</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-menu-item index="/demo" @click="goTo('/demo')">
                <i class="el-icon-menu"></i>
                <span slot="title">导航二</span>
              </el-menu-item>
              <el-menu-item index="/demo3" @click="goTo('/demo3')">
                <i class="el-icon-document"></i>
                <span slot="title">导航三</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
              </el-menu-item>
            </el-menu>
          </div>
          <div class="contentWrapper">
            <div class="mainHeader">
              
              <span><i class="el-icon-s-fold" @click="handleFold()"></i></span>
              <div class="userCenter">
                <el-link :underline="false" href="https://www.baidu.com" class="username">Admin</el-link>
                <el-avatar :size="40" :src="avaUrl"></el-avatar>
              </div>
            </div>
            <div class="mainContent">
              <router-view></router-view>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          isCollapse: false,
          collapseStatus: false,
          avaUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        }
      },
      methods: {
        handleOpen (key, keyPath) {
          console.log(key, keyPath)
        },
        handleClose (key, keyPath) {
          console.log(key, keyPath)
        },
        handleFold () {
          this.collapseStatus = !this.collapseStatus
        },
        goTo (path) {
          this.$router.replace(path)
        }
      }
    }
    </script>
    
    
    <style scoped>
      .containerWrapper{
        display: flex;
        flex-direction: row;
      }
      .sidebarWrapper{
         /*设置侧边栏导航高度*/
        min-height: 100vh;
      }
      .el-menu-vertical-demo:not(.el-menu--collapse) {
        /*设置侧边栏不折叠的宽度*/
        width: 250px;
        height: 100%;
      }
      .el-menu--collapse{
        /*设置侧边栏折叠后的高度*/
        height: 100%;
      }
      .indexPage .el-aside{
        width: 300px;/*设置侧边导航栏宽度*/
        overflow-x: hidden;
        overflow-y: hidden;
      }
      .contentWrapper{
         /*设置内容区包裹样式*/
        flex: 1;
        min-height: 100vh;
      }
      .mainHeader{
         /*头部样式设置*/
        height: 56px;
        padding: 0 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
      .mainContent{
         /*内容区样式设置*/
        padding: 0 10px;
        background: #F0F2F5;
        height: 100%;
      }
      .userCenter{
         /*头部右侧个人中心*/
        display: flex;
        align-items: center;
      }
      .userCenter .username{
        margin-right: 15px;
      }
    </style>

Demo.vue目标页面代码

<template>
      <div class="Demo">
        <h1>样例页面二</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Demo',
      data () {
        return {}
      }
    }
    </script>
    
    <style scoped>
    
    </style>

router/index.js路由代码为

1 import Vue from 'vue'
     2 import Router from 'vue-router'
     3 import HelloWorld from '@/components/HelloWorld'
     4 import Demo from '../components/Demo'
     5 import Demo3 from '../components/Demo3'
     6 
     7 Vue.use(Router)
     8 
     9 export default new Router({
    10   // 为了去掉吗默认情况下路由中出现的#号
    11   mode: 'history',
    12   routes: [
    13     {
    14       path: '/',
    15       name: 'HelloWorld',
    16       component: HelloWorld,
    17       children: [
    18         {
    19           path: '/demo',
    20           name: 'Demo',
    21           component: Demo
    22         },
    23         {
    24           path: '/demo3',
    25           name: 'Demo3',
    26           component: Demo3
    27         }
    28       ]
    29     }
    30   ]
    31 })

转载于:https://www.cnblogs.com/Jayeblog/p/11540033.html