從零開始的Vue學習日誌 — Vue Router 基礎說明

main.js

使用Vue cli webpack範本進行安裝預設會安裝vue router (也可以選擇不使用)，vue router可以協助管理網站入口，如同C#中的control控制的方式，方便完成SPA的開發。(相對的如果沒有SPA開發的需求或模糊網址的必要，就不需要使用)。官方網站。

由main.js可以知道載入vue router的位置是在 ./router

打開router/index.js

可以看到當path 為'/'(亦可用''表示)時，載入HelloWorld，取代vue.components中的<router-view/>標記。

App.vue

於是我們在運行時網站時便會看到HelloWorld的頁面

了解基本路由設定後，就可以自行添加路由。

先在/components 底下新增一個Home.vue。隨便輸入一下內容

vue router 是以模板方式載入資料，所以要以<template></template>包覆

接著在添加新路由

記得將Home import近來

然後輸入 http://localhost:8080/#/home，就可以看到剛建立的新頁面了。

剛建立的新頁面

補充說明：
網址列上醜醜的#是由於vue router是基於spa開發而設計的，為了達到頁面切換時保留頁面資訊，vue router使用了#來進行頁面重新導向。
在Html語法中#表示錨點，並不會真正執行跳頁的功能，vue router 利用此特性進行重新渲染模板而不遺失當前頁面資訊。官方說明

現在稍微修改一下home頁，讓他能連回首頁

<router-link></router-link>會自動轉譯成超連結

點節連結就可以返回首頁了

需使用 <router-link to=""></router-link> 才能保留目前狀態，如果使用<a></a>會真的進行頁面跳轉。自己在<a></a>加入class="router-link-active"雖然也可以，但官方表示不推薦。