---
# System prepended metadata

title: Router基本概念
tags: [六角 Vue3]

---

---
tags: 六角 Vue3 
---

# Router基本概念

### ==基本流程==

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

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

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

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

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

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

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

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

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

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