在vue中实现页面跳转的功能 router的连接方式

在vue中实现页面跳转的功能

 

利用element-ui选择布局可使用分格布局

 

选择布局容器，可以选择这种侧边栏和headser组合类型的

 

 

 

选择后创造Aside和Header的组件，因为是页面的公共部分，使用Main.vue引入

<script>
//引入侧边栏的组件
import commonAside from "../components/commonAside.vue";
//引入头部的组件
import commonHeader from "../components/commonHeader.vue";

export default {
  name: "Home",
  components: { commonAside, commonHeader },
  data() {
    return {};
  },
};
</script>

componenters引入组件

<template>
  <div>
    <el-container style="height: 100%">
      <el-aside width="auto">
        <!-- //侧边的组件在页面上显示 -->
        <common-aside></common-aside>
      </el-aside>
      <el-container>
        <!-- 首页的组件显示 -->
        <el-header>
          <common-header />
        </el-header>
        <el-main>
          <!-- 这是我们页面功能区显示的地方 -->