---
# System prepended metadata

title: Vue Router 網址路由 - SPA網頁開發
tags: [Mike課程]

---

---
tags:  Mike課程
---
# Vue Router 網址路由 - SPA網頁開發

### 設定
* 運用 < router-view >標籤，可將頁面內容做分離區隔。

>app.vue
    
```htmlmixed=
<template>
  <Header />
  <router-view></router-view>
  <Footer />
</template
```
    
>Home.vue
    
```htmlembedded=
<template>
  <Article />
  <Aside />
  <Main />
</template>

```

### router-view設定
* 如果要多一個router 可以在 router下個index.js 做設定

```javascript=
  {
    path: '/rwd',
    name: 'Rwd',
    component: Rwd
  },
```
* 也要記得imput 一個 view下的檔案近來

```javascript=
import Rwd from '../views/Rwd.vue'
```
###  router-link　連結設定

* 透過router-link to="" 的設定可將網址轉向其他對應網頁

```htmlembedded=
<router-link to="/rwd"></router-link>
```

### dynamic imports 動態載入

* 當我們要減少在載入頁面時，將所有龐大的js一起載入造成負載時、可以用dynamic imports方式 做router-link渲染來減少載入時一起將別的頁面來載入