?

Introduce.vue：

<template>
  <div class="intro">
    單位介紹
  </div>
</template>

<script>

</script>

<style scoped>
.intro{
  font-size:20px;
  color:#000;
  margin:20px auto;
}
</style>

Employment.vue：

<template>
  <div class="employment">
    人才引進
  </div>
</template>

<script>

</script>

<style scoped>
.employment{
  font-size:20px;
  color:#000;
  margin:20px auto;
}
</style>
 

Consult.vue：

<template>
  <div class="consult">
    咨詢
  </div>
</template>

<script>

</script>

<style scoped>
.consult{
  font-size:20px;
  color:#000;
  margin:20px auto;
}
</style>

Header.vue：

<template>
  <div class="header">
    <div class="header-wrapper">
      <ul class="nav">
        <li><router-link to="/home">首頁</router-link></li>
        <li><router-link to="/introduce">單位介紹</router-link></li>
        <li><router-link to="/employment">人才引進</router-link></li>
        <li><router-link to="/consult">咨詢</router-link></li>
      </ul>
    </div>
  </div>
</template>
<style>
  .header{
    height:60px;
    color:#fff;
    background: #42b983;
  }
  .header-wrapper{
    height:60px;
  }
  .nav{
    width:700px;
    height:60px;
    font-size:15px;
  }
  .nav li{
    float:left;
    margin-right:60px;
    height:60px;
    line-height:60px;
    overflow:hidden;
  }
  .nav li:last-child{
    margin-right:0;
  }
  .nav a{
    display:inline-block;
    padding:0 13px;
    color:#fff;
    border-radius:15px;
  }
  .nav a.router-link-active{
    background:#c10514;
  }
</style>
 

Home.vue：

<template>
  <div class="home">
    首頁
  </div>
</template>

<script>

</script>

<style scoped>
.home{
  font-size:20px;
  color:#000;
  margin:20px auto;
}
</style>

App.vue：

<template>
  <div id="vue">
    <div class="nav-top">
      <!-- 引入公用的頭部 header組件 -->
      <v-header></v-header>
    </div>
    <div class="contianer">
      <!-- 路由中的幾個組件在這裏被渲染，默認被渲染的為第一個組件，也就是home組件  -->
      <router-view></router-view>
    </div>
  </div>
</template>
<style>
#vue {
  font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
<script>
//引入header組件
import header from ‘./components/Header.vue‘
//輸出header組件
export default{
  components: {
    ‘v-header‘: header
  }
}
</script>
 

main.js：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
// 引入router路由
import Router from ‘vue-router‘
// 引入項目的四個模塊組件
import introduce from ‘./components/introduce‘
import home from ‘./components/home‘
import employment from ‘./components/employment‘
import consult from ‘./components/consult‘
// 使用router
Vue.use(Router)
// 定義路由
var routes = [{
  path: ‘/home‘,
  component: home
}, {
  path: ‘/introduce‘,
  component: introduce
}, {
  path: ‘/employment‘,
  component: employment
}, {
  path: ‘/consult‘,
  component: consult
}]
// 實例化路由
var vueRouter = new Router({
  routes
})
// 創建和掛載根實例
new Vue({
  el: ‘#app‘,
  router: vueRouter,
  template: ‘<App></App>‘,
  components: { App }
})

vue單文件組件實例2：簡單單文件組件