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

莊創偉
3 min readAug 15, 2019
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"雖然也可以,但官方表示不推薦。

--

--

莊創偉

學海無涯。但是為了生計還是得下海的風塵男子