相关文章推荐
有腹肌的红烧肉  ·  Vue Router·  2 月前    · 
有腹肌的红烧肉  ·  Axios HR·  2 月前    · 
有腹肌的红烧肉  ·  Getting Started | ...·  2 月前    · 

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就不會出現#了。