在昨天建置vue-cli插件時我們有新增vuex和vue-router,所以今天要先來介紹vue-router也就是vue的路由
首先,先來看一段官網的說明吧!
Creating a Single-page Application with Vue + Vue Router feels natural: with Vue.js, we are already composing our application with components.
在這裡我們可以知道使用Vue + Vue Router可以製作出一個只用一個網址就能去操控在這個網頁中的所有內容,也就是所謂的Single-page
那Vue Router是什麼呢?簡單來說他就是用來讓url和每個頁面能夠相互對應,所以在沒有使用vue-router時我們都是透過URL中的#(hash)去讓畫面做切換,那為什麼我們不直接使用hash就好了呢?因為hash並不包含在http的請求中,所以在url中他並不會重新載入頁面,而vue-router他會透過url的改變,來修改我們的頁面
所以如果我們使用了Single-page卻沒有使用router會造成什麼問題呢?比如說我今天插入了Vue的官網連結但我引用的介紹是在網頁中某個小標題的內容,可是因為它沒有使用路由所以就算附上了連結還是需要找一下是哪個小標題他的內容又在哪裡,這樣附上連結的意義就不大了!所以在Single-page中我們需要使用路由讓他去幫我們分配每個頁面所對應的URL