Bob's Blog

模板的作用是用来复用的。比如在前面我们准备好了header和footer的模板，这样写其他页面时，都会加载header和footer，而不需要重复写，只关注当前页面的特定元素控件和方法就好。

根据页面展示的元素的不同，可能需要复用多次。假设有header的页面是最基础的模板，页面一是显示了一个菜单栏，页面二也需要菜单栏并显示其他的元素，于是页面二以页面一作为模板。页面三是登录页面不需要菜单栏，于是页面三以header页面为模板。

为简单呈现，以文字代替。

页面一以最基础的app.vue为模板，内容为：

<template>
  <div style="margin: 20px;">
    <h3>this page is parent based on the default template</h3>
    <router-view/>
  </div>
</template>

页面一在router/index.js中定义为：

import Vue from 'vue'
import Router from 'vue-router'
import Parent from '@/components/parent'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/parent',
      name: 'parent',
      component: Parent,
    },
    ...
  ]
});

当前效果为：

页面二以页面一为模板，内容为：

<template>
  <div style="margin: 20px;">
    <h4>this this child based on parent template</h4>
  </div>
</template>

router/index.js中变化为：

import Vue from 'vue'
import Router from 'vue-router'
import Parent from '@/components/parent'
import Child from '@/components/child'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
   {
      path: '/parent',
      name: 'parent',
      component: Parent,
      children: [
        {
          path: 'child',
          name: 'child',
          component: Child,
        },
      ]
    },
    ...
  ]
});

当前效果为：

到此就能看到多重模板的效果了。