https://router.vuejs.org/
https://codecourse.com/watch/routing-with-vue-js?part=269-setting-up-and-first-route
看看定義大概就知道它的用途,VueRouter架構在Vuejs底下,它能讓所有網頁採用單一頁的方式呈現(不會有換頁的錯覺)。
『Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building
Single Page Applications
with Vue.js a breeze.』
範例:加入”首頁”與”關於我們”兩個頁面(component)
先前使用Vue,會將Home與About當作是Vue的Component,但這裡
Home與About代表兩個不同的路徑網頁,透過VueRouter控制,所以它們會是VueRouter的Component。
Vue需要指定router屬性,就是VueRouter物件。
<router-view> tag用以渲染Home與About的實際內容。
由router控制後,網址會多一個#,頁面就在router-view作呈現。
首頁網址: localhost/#/
about網址: localhost/#/about
稍微改一下上方的code,另外建立App,將VueRouter移到這裡面,並且建立Navigation(像是menu在每個頁面都能出現)。
Navigation雖然
使用anchor建立了這兩頁的連結
,但實際點連結會錯誤,路徑分別是localhost/與localhost/about,
少了#
。必須
透過<router-link> tag設定就會產生#
。
網址會出現#(hash)是因為VueRouter的mode參數預設定為hash,改成history就不會出現#了。