VueRouter基本的路由功能沒有運行起來，求助

我通過vuecli腳手架創(chuàng)建好模板之后，在入口函數(shù)main.js刪掉了原來代碼 自己編寫一個路由DEMO，但是consloe沒有報錯，也沒有出現(xiàn)目標組件，找了幾天 實在找不到，求助大蝦們

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)

var homePage={template:'<div>首頁</div>'}
var fristPage={template:'<div>11111</div>'}
var secPage={template:'<div>22222</div>'}

var router=new VueRouter({
    mode:'history',
    base:__dirname,
    routes:[
        {path:'/',component:homePage},
        {path:'/fri',component:fristPage},
        {path:'/sec',component:secPage}
    ]
})
/* eslint-disable no-new */
new Vue({
  router,
  teamlate:`<div id='headnav'>
      <h1>導航</h1>
          <ul>
                  <li><router-link to="/">首頁</router-link></li>
                  <li><router-link to="/fri">FRI</router-link></li>
                  <li><router-link to="/sec">SEC</router-link></li>
          </ul>
          <router-view/>
  </div>`
}).$mount('#app')