vue-router + vue组件的母版页-4

本章概述

        编程语言，设计模式，项目架构各种各样，但我们都是本着高内聚低耦合的原则去编程的。组件化，模板化正是根据单一责任原则。使功能细分，再组合。本次我们基于vue-router与vue组件化制作母版页。我把本章作为一次结合实用例子的vue-router详解。

相关vue

        首先component目录下为vue组件，分别为页头，页脚，侧栏导航。masterPage下是母版页本体。page下是页面展示的主体内容们。

4-1.母版页成员们

路由配置

        本次我使用的是文件解析方式的配置方式，另一种是导入式的方式，我上次写的《Vue，vue-router，axios，Vuex技术栈》中展示的就是导入式。解析式的有点在于文件目录与path，name在一起，便于编辑与注释。路由中只需配置母版页和内容页，组件是不需要再这里配置的。如图，在母版页的路由下children中配置内容页。

4-2.路由配置

母版页

        首先在script标签下用import导入组件文件，然后再下面的components中填写要使用的组件名，然后就可以写我们的组件标签了，组件标签没有大写字母，所以变量时的驼峰命名法要做对应更改。以 '-' 连接字母，如图中
vHeader→v-header等（vue组件的设计预计会在第五章详解）。然后我们在主体内容的部分添加一个router-view标签。外面的keep-alive是缓存页面，transition标签为了切换效果，与本次关系不大。这样我们进入内容页的路由时，就会先加载母版页信息，然后对children的内容会在router-view中展示。

4-3.Home.vue

效果展示

4-4.效果展示

样式表不解释了，如果大家真的需要讲解样式可以给我留言或评论，我会根据大家要求准备新文章。

gitee项目源码在这里

关于router的api更多功能操作，我们再用到时再讲解。

评论区可以提问，或者提出下一次想了解的知识点。ps.如果你问的我不会，那等我就先去学习下再回答哟