iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
自我挑戰組

Vue.js系列 第 25

Vue Router介紹

  • 分享至 

  • xImage
  •  

在昨天建置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


上一篇
Vue CLI建置 & GitHub上傳
下一篇
Vue Router實作
系列文
Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言