Vue Router-Day01 # 簡介與 在一般網頁中引入Vue Router

Vue Router 簡介

在一般網頁中引入Vue Router

• Vue Router在一般情況下，我們都會使用vue cli進行開發
• 但是Vue Router並不是只有在vue cli的環境中才能運行，開頭我們在純html環境下也可以進行Vue Router開發
• 開始：
  • 要使用Vue Router就必須先建立環境
  • ＃1.先建立vue環境

 <script>
const app = Vue.createApp({
  data() {
    return {
      counter: 0,
      text: '這裡有一段文字'
    }
  }
});

// 路由設定
// const router = VueRouter.createRouter({
//   // 網址路徑模式：使用網址 hash 的形式
//   history: VueRouter.createWebHashHistory(),
//   // 匯入路由表
//   routes: []
// });

app.mount('#app');
</script>

• ＃2.載入Vue Router 套件cdn
  
• #3.加入app.use(router)
  

再來是準備元件的部分

• 想像在每個頁面都是獨立的元件
  • #1.我們會先建立兩個不同的元件，來代表兩個不同的頁面
    
  • #2.建立起元件後，我們必須在路由表上撰寫，代表我們進入到哪個路由時，會切換到哪個元件：我們會在路由表：[]裡面加入物件{}，每個物件代表一個路由和元件
    
  • #3.在這裡元件還不會顯示在畫面上，因為我們還沒完成router-view套件設定
    
  • ＃4.在頁面/元件之間切換時，路徑會存在瀏覽器中，因此可以在瀏覽器上按下上一頁或下一頁紀錄
  • #5.但通常來說，用戶不會手動輸入網址，因此我們會在畫面上放入連結提供使用者點擊：這時需要使用到另一個router-link套件（類似）html a連結標籤 to屬性有點像a連結裡的href屬性 寫入路由表中的path