第四章建立公共模板.md

第四章:建立公共模板

前言

在我们浏览页面的时候总会发现网站的导航以及底部会在每一个网页中出现，我们不可能在每一个页面中都写上重复的代码吧！所以我们需要建立一个公用公共的模板让每一个需要展示到的网页都展示上

学习目的

学会在路由中配置公共模板

注册组件使用组件

开始操作

1. 在components下新建_basic-layout-header.vue和_basic-layout.vue两个组件
2. 修改router.js中的路由配置文件

_basic-layout-header.vue

<template>
 <div>
     <h1>header</h1>
 </div>
</template>

_basic-layout.vue

我们在模板文件中引入头部组件通过components进行注册使用 'bs-header':header定义标签名

<template>
 <div>
     <bs-header></bs-header>
     <router-view></router-view> ..渲染容器
 </div>
</template>

<script>
import header from "./_basic-layout-header";
 export default {
   data () {
     return {

     }
   },
   components: {
       'bs-header':header
   }
 }
</script>

接着我们需要去router.js中配置一下让我们的每一个页面都显示导航

我们在根路径上使用Layout作为模板那么他的子路由也会继承他的模板，这也就是为什么儿子长的像爸爸

const Layout = () => import(/* webpackChunkName: "Layout" */ "@/components/_basic-layout.vue");
const Home = () => import(/* webpackChunkName: "Home" */ "@/views/Home.vue");

export default [
  {
    path: "/",	//根路径
    name: "root",	
    component: Layout,
    redirect: { name: "Home" }, //重定向首页
    children: [		//子路由配置
      {
        path: "/home",
        name: "Home",
        component: Home,
        title: "主页"
      }
    ]
  }
]

配置好后页面应该会显示出header和home吧那么我们就成功配置好了

到这里我们项目大概的东西就配置好了就差vue的组件库element还没有引入了~