# Vue 初探(下)
## 目錄
[toc]
## What is Vue Router
### first, We talk about the concept of router
1. 動態網頁的架設
- 功能/需求日益複雜的網頁在傳統的靜態網頁會有維護不易的問題；然而，仰賴伺服器與資料庫之間的共同運作，由後端處理頁面邏輯、資料庫紀錄現狀與資料，便能透過一頁作為主要的架構之上，透過兩者來渲染出不同的內容

2. Router(路由) 圖示
- 像是component tree的架構，不過以網址作為連結間的串接

3. browser和server之間的關係
- 一旦瀏覽器透過不同的網址向後端的網頁伺服器發送請求(request)，伺服器接收後便回應對應內容來渲染，此種方式便被稱為網站路由(Routing)
- Router便為一種路由管理程式。
- 附註:URL 完整英文是 Uniform Resource Locator （全球資源定位器)，通常稱為“網址”

### Then, that's go on Vue Router
#### SPA的缺陷
- 之前教的Single Page Application(SPA)看似能應付網頁的運行，然而實際應用上通常需要首頁以外的網頁。我們當然可以選擇直接撰寫該網頁，但是這樣不僅會增加專案維護的複雜度，更會增加使用成本。
- SPA is not only one page we see in a browser; in contrast, there's only one html page sending back to the browser from the server
- therefore, we never need to send another request to the server for more pages, because Vue just swithes out the components for different routes when it is needed
- 至於影響使用成本的原因，必須從之前提過的網路請求說起。
- 當我們今天在網址列輸入網址的時候，瀏覽器會向伺服器主機提出資源請求(request)，然後伺服器端會根據傳來的請求判斷要給予甚麼樣的回應以及什麼樣的內容，最後打包成回應(response)再回傳給客戶端。這樣的架構在一般情況雖然沒有太大問題，但是如果伺服器處於繁忙的狀態時，就有可能會導致使用者需要等上一段時間才能切換頁面。如果今天我們可以將切換頁面的事情交給Javascript來處理，那就能降低伺服器的負擔。
#### Vue Router的好處
- Vue Router 是前端模擬的網頁路由技術，讓使用者透過網址，決定顯示出的頁面。使用時輸入的網址內容，轉譯為輸入條件讓前端程式判定，接著將此做為搜尋條件，以返回相對應的網頁。
- 我們能利用Vue Router以避免伺服器過於繁忙。利用網址列去做對應的渲染，使得我們透過超連結前往其他網頁的時候，就不需要再向伺服器端發送請求，交給Vue做渲染就可以了。
- When we work with routing by Vue router, it takes one extra step.
- look at the route that we are currently on in the browser and decide which component should nest inside the App.vue component dependent on that route
- intercept the Vue request from browser

### Install Vue Router
- 和之前提到的Vue CLI安裝步驟差不多
1. 建立一個資料夾，並開啟終端機，移動到剛剛創立的資料夾，在終端機輸入

vue create [專案名稱]

2. 選擇第三個"Manually select features"
3. 然後勾選Router，記得是按空白鍵選擇(很重要!!!!!)
4. 接著選擇Vue3，剩下的都按過去就可以了(已被預設為default)
5. 然後稍等他一下，完成之後，便能將檔案從VScode開啟

PS:如果剛剛沒有選到Vue-router，那就再用npm install就可以了，對於正在開發的專案也是這樣處裡

npm install vue-router@4

6. 最後檔案打開來會呈現下圖:

- package.json中的"vue-router"代表Vue router已經被安裝於專案中，因此我們能產生不同的路由
- src中的router資料夾內含有一個index.js，我們設置不同的路由於此

## 介紹
#### main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

- we use the method of use() which take the arguement about the router from the file './router'
- if the folder contains only index.js, it will automatically import the index when we use the folder name

#### App.vue

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

- `<router-view>` is the Vue Router special tag
- means the router will dynamically injected depending on the route that we visit; that s, it renders in there

#### index.js
- this is where we set up all of our differnet routes

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
// finally, we export the router at the buttom

- the routes array: contains different objects, each of whom represents a single route
- the properties in the objects
- `path` :it is a url path relative to the root of the website
- `name` :it is a name of the route like a kind of an identifier
- `component` :it is the component we want to use when the user go to the route, which has imported at the top
- this is where we actually set up the router instance, now it just creates our riuter for the App.vue

- the function createRouter() has been imported at the top from the Vue Router package
- the function createWebHistory() create web history is saying to use the web history API in the browser, so that we can click forward and back in our browser to go to the previous routes
- inside the function, we alse pass in thebase url of our project,such as process.env.BASE_UR, most time we don't need to change any of the setup inside "this" router

### 檢查
`npm run serve`後，大家可以打開Devtool(F12)，然後查看Network，看看切換頁面得時候有沒有多的請求。然後再打開其他網站，看看切換網站的時候有沒有多的請求。