element后端管理布局

<template>
  <el-container>
    <el-header>
      <Header></Header>
      <span class="Slogan">中间广告语</span>
      <span class="welcome">登录用户</span>
    </el-header>
    <el-container>
      <el-aside width="180px">
        <Aside></Aside>
      </el-aside>
      <router-view></router-view>  从此处渲染
    </el-container>
  </el-container>
</template>

Home.Vue页面模板

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "/Login",
  },
  {
    path: "/home",
    component: () => import("../views/Home.vue"),
    redirect: "/main", //需要重定向到main页面，这样所有子页面就能显示到中间了
    children: [
      {
        path: "/main",
        component: () => import("../components/Main.vue"),
      },
      {
        path: "/users",
        component: () => import("../views/Users.vue"),
      },
      {
        path: "/roles",
        component: () => import("../views/roles.vue"),
      },
    ],
  },
  {
    path: "/login",
    name: "login",
    component: () => import("../views/login.vue"),
  },
];

const router = new VueRouter({
  routes,
});

//路由卫士
//to将要访问的路径 from从哪里转来 next('xxx')强制跳转 next()放行
router.beforeEach((to, from, next) => {
  if (to.path === "/login") return next();
  var session = window.sessionStorage.getItem("token");
  if (session == null) return next("/login");
  next();
});
export default router;

路由设置

效果展示,左侧导航栏点击后跳转路由