当前位置：首页 > article >正文

vue-router+element-plus实现左边侧边栏+右边内容

article 2024/11/6 10:01:47

文章目录

element plus
vue router
清空vue默认页面
现在我们开始用element plus做layout&菜单
- layout

element plus

第一步
pnpm install element-plus
第二步
main.js

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

第三步：用el-button 检测是否配置成功

vue router

第一步
pnpm install vue-router
第二步
src文件夹下创建 router文件夹，再在这个文件夹中创建index.js(index,ts)
路径为src\router\index.js

这里我们添加一个404页面看vue router是否配置成功
src\router\index.js

import {createRouter, createWebHashHistory} from 'vue-router'

let router = createRouter({
  //模式
  history: createWebHashHistory(),
  routes: [
    {
      path: '/404',
      component: ()=>import('@/views/404/index.vue'),
      name: '404', //命名路由
      meta: {
        title: '404',
        hidden: true,
        icon: 'SetUp'
      },
    }
  ]
})

export default router;

src文件夹下新建404文件夹
具体路径 src\views\404\index.vue

<template>
  <div>
    <h1>404</h1>
  </div>
</template>

<script lang="ts">

</script>

<style scoped>

</style>

第三步入口文件 main.js中引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import router from './router'

const app = createApp(App)

app.use(ElementPlus)
app.use(router)

app.mount('#app')

第四步
这样配置完之后，访问http://localhost:5173/#/404是不会出现页面的，因为我们需要在APP.VUE中添加 <router-view></router-view>

在这里插入图片描述

这样当访问/404时候，router view位置就会出现404页面
在这里插入图片描述

清空vue默认页面

APP.vue
此时这里最重要的是<router-view></router-view>，因为这是路由显示的地方

<script setup>
</script>

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<style scoped>
</style>

删除style.css
删除main.js入口文件中的 import './style.css'

现在我们开始用element plus做layout&菜单

layout

layout是整个主体框架
在这里插入图片描述

第一步
在src下新建layout文件，把上面的代码复制到 src\layout\index.vue中
这里我加了一些样式，背景颜色

<template>
  <div class="common-layout">
    <el-container>
      <el-aside class="layout_menu">
        <div class="logo">SuperScopeChat</div>
        <el-menu
          :default-active="$route.path"
          :router="true"
          active-text-color="#29b564"
          background-color="#1e1e1e"
          text-color="#fff"
        >
          <el-menu-item index="/portfolio">
            <el-icon><icon-menu /></el-icon>
            <span>Portfolio</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <el-icon><document /></el-icon>
            <span>Disabled Navigator</span>
          </el-menu-item>
          <el-menu-item index="/newchat">
            <el-icon><setting /></el-icon>
            <span>New Chat</span>
          </el-menu-item>
          <el-menu-item index="/apitest">
            <el-icon><icon-menu /></el-icon>
            <span>Api Test</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="layout_main" >
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
let $route = useRoute()
</script>

<style scoped>
.logo {
  height: 80px;
  width: 100%;
  /* background-color: #fff; */
  line-height: 80px;
  font-size: 1.5em;
  font-weight: bolder;
  color: #29b564;
  text-align: center;
}
.common-layout {
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.layout_menu{
  width: 250px;
  height: 100vh;
  background-color: #1e1e1e;
}

.layout_main {
  width: calc(100vw - 250px);
  height: 100vh;
  color: #fff;
  /* background-color: red; */
}

.el-menu{
  border-right: none !important;
}
</style>

第二步
配置路由，不在 src\router\index.js 中配置是显示不出来的
这里把layout配置成了根路由

import {createRouter, createWebHashHistory} from 'vue-router'

let router = createRouter({
  //模式
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      component: ()=>import('@/layout/index.vue'),
      name: 'layout', //命名路由
      meta: {
        title: 'layout',
      }
  ]
})

export default router;

第三步
这里其实是最关键的，layout其实只是一个框架，我们是用其他的路由使用同一个layout框架
完整的router：（其余代码略）

import {createRouter, createWebHashHistory} from 'vue-router'

let router = createRouter({
  //模式
  history: createWebHashHistory(),
  routes: [
    {
      path: '/404',
      component: ()=>import('@/views/404/index.vue'),
      name: '404', //命名路由
      meta: {
        title: '404',
        hidden: true,
        icon: 'SetUp'
      },
    },
    {
      path: '/',
      component: ()=>import('@/layout/index.vue'),
      name: 'layout', //命名路由
      meta: {
        title: 'layout',
      },
      redirect: '/portfolio',
      children: [
        {
          path: '/portfolio',
          component: ()=>import('@/views/portfolio/index.vue'),
          name:'portfolio',
          meta: {
            title: 'portfolio'
          }
        }
      ]
    },
    {
      path: '/apitest',
      component: ()=>import('@/layout/index.vue'),
      name: 'apitest', //命名路由
      redirect: '/apitest',
      children: [
        {
          path: '/apitest',
          component: ()=>import('@/views/apiTest/index.vue'),
          name:'apitest',
          meta: {
            title: 'apitest'
          }
        }
      ]
    },
    {
      path: '/newchat',
      component: ()=>import('@/layout/index.vue'),
      name: 'newchat', //命名路由
      redirect: '/newchat',
      children: [
        {
          path: '/newchat',
          component: ()=>import('@/views/newChat/index.vue'),
          name:'newchat',
          meta: {
            title: 'newchat'
          }
        }
      ]
    }
  ]
})

export default router;