vue3 后台管理系统自配路由，左边菜单栏点击，右边内容区显示不同内容

最新推荐文章于 2024-05-09 12:06:04 发布

Lucky_zss

最新推荐文章于 2024-05-09 12:06:04 发布

阅读量265

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/zss_base/article/details/137930708

版权

//router> index.js页面

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    // 普通路由
    {
      path: '/register',
      name: 'register',
      component:()=>import('../views/RegisterView.vue')
    },
    {
      path: '/login',
      name: 'login',
      component:()=>import('../views/LoginView.vue')
    },
    {
      path:'/',
      name:'/home',
      component: IndexView,
    },
  
    {
      path:'/admin',
      // redirect:'/admin/index',
      component:()=>import('../views/Admin/IndexView.vue'),
      children:[
        {
          path:'index',
          component:()=>import('../views/Admin/IndexView.vue')
        },
        {
          path:'chart',
          component:()=>import('../views/Admin/ChartView.vue')
        },
        {
          path:'members',
          component:()=>import('../views/Admin/MembersView.vue')
        },
        {
          path:'permission',
          component:()=>import('../views/Admin/PermissionView.vue')
        }
       
      ]
    },
    {
      path: "/:pathMatch(.*)*",
      name: "404",
      component:()=>import('../views/NotFoundView.vue')
    }

]







//indexView 页面
//router-link 跳转
//router-view  渲染页面

 <a-menu v-model:selectedKeys="state.selectedKeys" theme="dark" mode="inline" >
          <!-- 图表统计 -->
          <a-menu-item key="/admin/chart">
            <pie-chart-outlined />
            <span>图标统计</span>
            <router-link to="/admin/chart"></router-link>
          </a-menu-item>
          <!-- 会员管理 -->
          <a-menu-item key="/admin/members">
            <desktop-outlined />
            <router-link to="/admin/members"></router-link>
            <span>会员管理</span>
          </a-menu-item>

 <!-- 中间 -->
        <a-layout-content style="margin: 0 16px">
          <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item>User</a-breadcrumb-item>
            <a-breadcrumb-item>Bill</a-breadcrumb-item>
          </a-breadcrumb>
          <div
            :style="{ padding: '24px', background: '#fff', minHeight: '460px' }"
          >
            <router-view></router-view>
          </div>
        </a-layout-content>