使用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/>標記。
於是我們在運行時網站時便會看到HelloWorld的頁面
了解基本路由設定後,就可以自行添加路由。
先在/components 底下新增一個Home.vue。隨便輸入一下內容
接著在添加新路由
然後輸入 http://localhost:8080/#/home,就可以看到剛建立的新頁面了。
補充說明:
網址列上醜醜的#是由於vue router是基於spa開發而設計的,為了達到頁面切換時保留頁面資訊,vue router使用了#來進行頁面重新導向。
在Html語法中#表示錨點,並不會真正執行跳頁的功能,vue router 利用此特性進行重新渲染模板而不遺失當前頁面資訊。官方說明
現在稍微修改一下home頁,讓他能連回首頁
點節連結就可以返回首頁了
需使用 <router-link to=""></router-link> 才能保留目前狀態,如果使用<a></a>會真的進行頁面跳轉。自己在<a></a>加入class="router-link-active"雖然也可以,但官方表示不推薦。