Vue 单文件组件

后缀名为 xxx.vue 的文件都是 单文件组件。

<template>
</template>

<script>
export default {
  name: 'xxx'
}
</script>

<style>
</style>

script 部分就是逻辑区域。

Vue 路由

当单文件组件的 template 部分有 <router-view/> 内容的时候，则表示，该单文件组件将要显示的是当前路由地址所对应的内容。

而我们可以在 src/router/index.js 看到路由的配置信息。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

上面的代码，我们可以看出，当当前路由地址为 / 的时候，路由器将展示 HelloWorld 组件的内容。