---
tags: 六角 Vue3
---

# Router基本概念

### ==基本流程==

1. 引入 Vue Router 環境
2. 定義元件
3. 定義路由表
4. 加入對應連結

### ==路由基本起手式==

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

### ==一般網頁流程==

* 假設我們定義兩個元件頁面

const commentsA = {
    template: `<div>A</div>`
    }
const commentsB = {
    template: `<div>B</div>`
    }

* 在路由path 路由表設定兩個網址連結
* 一個網址對應一個 component 加上 定義元件

 // 路由設定
    const router = VueRouter.createRouter({
      // 網址路徑模式：使用網址 hash 的形式
     history: VueRouter.createWebHashHistory(),
       // 匯入路由表
       routes: [
          // 在路由path 路由表設定兩個網址連結           
          { path: '/a',component: commentsA },
          { path: '/b',component: commentsB }
            ]
          });

* 頁面連結方式 router-link 為連結 內容須加上 to="網址"
* 頁面顯示方式 router-view 為顯示元件內容

<!-- 頁面連結方式 router-link 為連結 內容須加上 to="網址" -->
  <router-link to="/a">A</router-link> |
  <router-link to="/b">B</router-link>
<!-- 頁面顯示方式 router-view 為顯示元件內容   -->
  <router-view ></router-view>