在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>
<!-- 这是我们页面功能区显示的地方 -->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
router-view是路由文件在这里使用,是在router文件里面配置好的
那我们来看路由页面