4-1 Vue Router 與前後端路由 | vue網址
![4-1 Vue Router 與前後端路由](https://i.imgur.com/axBPWDg.jpg)
(opensnewwindow)[1]如同前面章節介紹過的,Vue.js的核心是用來處理「狀態」與「網頁模板」的映射關係。當整個網站逐漸發展成為應用程式的時候,Vue.js元件、甚至是頁面之間切換的流程、狀態的邏輯,若要使用原本我們所熟悉的v-if、:is指令,就顯得有些力不從心。而本章所要介紹的VueRouter,作為Vue.js框架生態圈的一部分,彌補了Vue.js核心薄弱的部分,除了前面提到控制元件的切換邏輯之外,還能搭配前端路由機制來操作瀏覽器上/下一頁的流程,這使得Vue.js也有了能夠建立SPA完整單頁式應用的能力。多頁式應用(MPA)與單頁式應用(SPA...
![4-1 Vue Router 與前後端路由](http://pix4.agoda.net/hotelimages/agoda-homes/5899847/61e1a790eeb181e40e8f262ea5a396dc.jpg?s=800x)
(opens new window)[1]
如同前面章節介紹過的,Vue.js 的核心是用來處理「狀態」與「網頁模板」的映射關係。 當整個網站逐漸發展成為應用程式的時候,Vue.js 元件、甚至是頁面之間切換的流程、狀態的邏輯, 若要使用原本我們所熟悉的 v-if 、 :is 指令,就顯得有些力不從心。
而本章所要介紹的 Vue Router ,作為 Vue.js 框架生態圈的一部分,彌補了 Vue.js 核心薄弱的部分, 除了前面提到控制元件的切換邏輯之外,還能搭配前端路由機制來操作瀏覽器上/下一頁的流程, 這使得 Vue.js 也有了能夠建立 SPA 完整單頁式應用的能力。
多頁式應用 (MPA) 與 單頁式應用 (SPA)最早期的網頁幾乎都是以靜態網頁為主,所有資料直接從 Server 端輸出,幾乎不需要做運算,HTML 內容就是單純的文字、圖片等靜態資料,頁面之間各自是獨立的狀態。 後來過了幾年,有了「動態網頁程式」的語言 (如 PHP、ASP 等) 才開始由後端程式語言負責處理頁面邏輯,加上資料庫系統的成熟,使得原本無法紀錄狀態的網頁,可以利用資料庫來記錄狀態及資料。人們這才開始意會到,原來網頁是可以用來開發「應用程式」的。
當網頁逐漸往應用程式發展之後,網站的架構就從原本的「靜態網頁」變成了「動態網頁」,那麼,什麼是動態網頁呢?
假設我們要做一個電商網站,最基本可能就會有「商品列表頁」、「商品說明頁」、「購物車頁」、「結帳頁」... 等類型。 其他的先不說,就拿「商品說明頁」來做例子。
以傳統的 「靜態網頁」 來說,一個商品就會有一個屬於自己的獨立「商品說明頁」,那假如網站上面有一百個商品, 網站的開發者就得分別維護這一百個 「商品說明頁」,即便他們的結構是一樣的,只是內容不同。
而轉換成動態網頁,由於主要是搭配伺服器與資料庫共同運作,網頁的內容會隨著使用者的操作和互動而有所不同, 於是原本一百個靜態的 「商品說明頁」,其實我們只需要一頁商品說明頁的「結構」,再搭配伺服器端與資料庫渲染出不同的內容即可。
什麼是路由那麼,網站的伺服器怎麼知道什麼時候要提供什麼資料給使用者呢? 熟悉網站操作的各位一定知道,就是透過網址的結構。
取得本站獨家住宿推薦 15%OFF 訂房優惠
本站住宿推薦 20%OFF 訂房優惠,親子優惠,住宿折扣,限時回饋,平日促銷
vue | vue網址
4-3 <router-link> 建立路由連結 | vue網址
4-1 Vue Router 與前後端路由 | vue網址
4-2 Vue Router 路由設定 | vue網址
Vue-router 教學 | vue網址
一起幫忙解決難題,拯救IT 人的一天 | vue網址
Day 26 Vue-router簡介- iT 邦幫忙 | vue網址
從零開始的Vue學習日誌— Vue Router 基礎說明. 使用Vue cli ... | vue網址
vue-router 的URL路徑中#的意義 | vue網址
![](https://i.imgur.com/axBPWDg.jpg)