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

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

>app.vue

<template>
  <Header />
  <router-view></router-view>
  <Footer />
</template

>Home.vue

<template>
  <Article />
  <Aside />
  <Main />
</template>

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

  {
    path: '/rwd',
    name: 'Rwd',
    component: Rwd
  },

* 也要記得imput 一個 view下的檔案近來

import Rwd from '../views/Rwd.vue'

### router-link　連結設定

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

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

### dynamic imports 動態載入

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