iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
自我挑戰組

與Vue相遇系列 第 17

Day017-Vue Router介紹(一)基本介紹

  • 分享至 

  • xImage
  •  

Vue:還記得在Vue CLI建置專案時候,也有遇上Vue Router嗎?
https://ithelp.ithome.com.tw/upload/images/20201001/20130654sUQZJtTBkt.jpg
https://ithelp.ithome.com.tw/upload/images/20201001/20130654rRREMVsxsM.jpg
無論你是使用history mode或hash mode,設置路由,將可以導入到正確的頁面上。在談論vue router之前,我們先來討論一下,為什麼我們需要路由:

當我們開始建構網站時,除了組件上的外觀顯示不同外,最重要的是跳轉頁面的改變。想像一下,導覽列是我們的原件,每一個按鈕,將會帶著使用者,進入到不同頁面中。:

https://ithelp.ithome.com.tw/upload/images/20201001/20130654Hu8aiGusB0.jpg

除了上圖跳轉外,也有可能在導覽列按下其中一個page後,裡面又有其他路由:

https://ithelp.ithome.com.tw/upload/images/20201001/20130654wFauWJHfeX.jpg

甚至,與組件一樣,也有可能會將值,從某一頁面中,傳入到目的地頁面:

https://ithelp.ithome.com.tw/upload/images/20201001/20130654zOHUu7MEn0.jpg

Vue:這三天,我將讓你深入了解我。不然,有可能你都不懂我,我怎麼傳達對的事和你分享呢~

待續......


上一篇
Day016-Component組件-傳值(props和$emit)
下一篇
Day018-Vue Router介紹(二)路由設定
系列文
與Vue相遇30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言