vue的單文件組件的基本構成是這樣的：

<template>
    <div>
       結構： （註意：template裏只能有一層div，不能出現兩個並列的div ）
    </div>
</template>

// 邏輯
<script>
export default {
    name: ‘組件名‘
}
</script>

// css樣式
<style lang="">
    
</style>

項目打包完成後，可以看到main.js裏有這樣的一段：

new Vue({
  el: ‘#app‘,
  router,
  store,
  components: { App },
  template: ‘<App/>‘
})

也就是說，項目的根實例為 <div id="app"></div>

再看App.vue文件：

<template>
  <div id="app">
      <router-view/>
  </div>
</template>

<script>
export default {
  name: ‘App‘
}
</script>

<style>

</style>
 

這裏的router-view顯示的是當前路由的地址所對應的內容

如果去掉router-view，頁面就是空白的

那，路由（router）是什麽？

字面意思是，根據網址的不同，返回不同的內容給用戶，例如，訪問根路徑‘/’,就訪問主頁，訪問‘/list’，那就訪問列表頁

export default new Router({
  routes: [{
　　  // 當用戶訪問根路徑‘/’的時候，展現給用戶的是Home這個組件
      path: 
 
‘/‘,
      name: ‘Home‘,
      component: Home
    }, {
　　　 // 當用戶訪問根路徑‘/city’的時候，展現給用戶的是City這個組件

　　　　path: ‘/city‘,
　　　　name: ‘City‘,
　　　　component: City }]

啊~剛開始還覺得有點亂，我總感覺自己說不明白……

vue小項目總結與筆記【二】——vue的單文件組件模板和路由