路由布局

路由布局是本章最后一个知识点，经过第1～6章的学习，相信大家已经入门 Vue。简单地说，路由布局就是使用一个路由匹配规则，在页面中同时显示多个组件。

代码流程如下。

  1. 创建 3 个组件。

  2. 创建路由匹配规则。

  3. 视图层显示组件，具体代码如下。

视图层代码如下。

<div id="app" v-cloak>
  <router-view></router-view>
  <router-view name="main"></router-view>
  <router-view name="footer"></router-view>
</div>

逻辑代码如下。

<script>
  var header = {
    template: '<div><h1>头部</h1></div>'
  }
  var main = {
    template: '<div><h1>主体</h1></div>'
  }
  var footer = {
    template: '<div><h1>底部</h1></div>'
  }
  var router = new VueRouter({
    routes: [{
      path: '/',
      components: {
        'default': header,
        'main': main,
        'footer': footer
      }
    }]
  })
  var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    components: {},
    router: router
  })
</script>

代码解析如下。

这里重点讲解路由匹配规则，当访问根路径需要同时显示 3 个组件时，把原先的属性 component 换成了 components。

components 属性的作用是给组件起名字，视图层中要显示几个组件就写几个 router-view 标签，使用 name 属性指定 router-view 具体显示的内容，其值就是 components 中自定义的组件名。