vue之后台管理页面路由

vue之后台管理页面路由

原理：
左边菜单router-link到子路由，右边主内容 router-view

路由代码

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    redirect: '/index',//重定向到第一个子路由
    children:[
      {
        path: '/index',
        name: 'index',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/index.vue')
      },
      {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      }
    ]
  },
 
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

页面代码

<template>
  <div class="home">
    <div class="main">
      <ul class="left_main" :class="{ left_main_shou: !openStatus }">
        <h1 @click="change">{{ openText }}</h1>
        <router-link to="index">
          <li>首页</li>
        </router-link>
        <router-link to="about">
          <li>关于</li>
        </router-link>
      </ul>

      <div class="right_main" :class="{ right_main_show: !openStatus }">
        <router-view />
      </div>
    </div>
  </div>
</template>

<style scoped>
.main {
  display: flex;
  width: 100%;
  height: 100vh;
}

.left_main {
  border: solid 1px red;
  width: 300px;
  text-align: center;
  background-color: aquamarine;
  transition: width 1s;
  -webkit-transition: width 1s; /* Safari */
}
.left_main li {
  list-style: none;
}
.right_main {
  width: calc(100% - 300px);
  border: solid 1px rgb(116, 12, 235);
  background-color: brown;
  transition: width 1s;
  -webkit-transition: width 1s; /* Safari */
}
.left_main_shou {
  width: 100px;
}
.right_main_show {
  width: calc(100% - 100px);
}
</style>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  components: {},
  data: function () {
    return {
      openText: "收起",
      openStatus: true,
    };
  },
  methods: {
    change() {
      this.openStatus = !this.openStatus;
      if (this.openStatus) {
        this.openText = "收起";
      } else {
        this.openText = "打开";
      }
    },
  },
};
</script>