今天我們將學(xué)習(xí)如何用VUE構(gòu)建一個簡單的單頁應(yīng)用(SPA)
如果沒有其他特殊聲明，此教程中的VUE全部指的是VUE2.X版本
預(yù)覽
讓我們先看看最終的的單頁程序是什么樣子的
閱讀本教程之前希望你能有如下的基礎(chǔ)知識：
- VUE基礎(chǔ)
- 如何創(chuàng)建VUE組件
如果你沒有任何VUE或者VUE組件的知識，可以看我之前的文章
使用Vue CLI 腳手架
我們將使用VUE提供的腳手架模塊Vue CLI拙泽，它可以使我們構(gòu)建的程序兼容ES5版本的瀏覽器。
NOTE: 當(dāng)然這需要你在Node.js環(huán)境下進(jìn)行開發(fā)，如果你還沒有Node.js和NPM的基本知識荐操，建議你花半個小時的時間配置好Node.js環(huán)境骡澈，相信我，很簡單攀涵，百度隨便一搜就出來一大把教程铣耘。
如何你還沒有安裝Vue CLI，你可以用下面的命令進(jìn)行安裝
npm install -g vue-cli
NOTE: vue-cli已經(jīng)有了3.0版本以故，改名為 @vue/cli, 但是當(dāng)前vue-cli還是可以使用的蜗细，因為大部分用戶還是在用vue-cli，所以本教程也繼續(xù)使用vue-cli作為教學(xué)。
安裝完Vue CLI炉媒，我們將通過下面的命令構(gòu)建我們的VUE項目踪区。
vue init webpack spa
在上面的命令中，我們說明一下webpack和spa這兩個參數(shù).
Webpack是指你想用哪個腳手架模板吊骤，這里其實(shí)用很多模板供我們選擇,比如簡化版webpack-simple缎岗，具體使用方法可以參考這里
SPA指的是你要把項目放在哪個文件夾里，這里就是SPA這個文件夾白粉，如果沒有系統(tǒng)會自動創(chuàng)建密强。
運(yùn)行上面這個命令后，會有一些選項讓你選擇蜗元，比如項目的名字等等或渤，全部默認(rèn)就可以。
運(yùn)行完上面的命令后奕扣，我們需要將當(dāng)前路徑改變到SPA這個文件夾內(nèi)薪鹦，然后安裝需要的模塊：
//改變路徑到spa文件夾下
cd spa
//安裝所有項目需要的npm模塊
npm install
//在開發(fā)環(huán)境下運(yùn)行程序
npm run dev
當(dāng)上面的命令運(yùn)行起來的時候，用瀏覽器訪問 http://localhost:8080 這個地址惯豆，我們會看到如下頁面：
VUE Router 的安裝與配置
在我們正式開始配置我們的單頁程序之前池磁，還有一個東西必須安裝，vue-router楷兽。
vue-router 是VUE官方提供的一個路由組件地熄，專門用來構(gòu)建VUE的單頁程序，它包含如下一些特點(diǎn)：
- 支持嵌套路由
- 組件化路由配置
- 支持路由參數(shù)傳遞芯杀，支持通配符
- 比傳統(tǒng)路由更加優(yōu)化的導(dǎo)航控制
- 自動激活不同CSS樣式
- 支持HTML5歷史模式或哈希模式端考，支持IE9的自動回退功能
- 支持自定義的滾動軸特性
如果你之前接觸過angular router或者react-router，其實(shí)vue-router跟這兩個非常相似揭厚。
我們使用vue-router的原因就是它可以使我們的頁面在前端就完成切換却特，而不是每次切換頁面都要向服務(wù)器重新請求數(shù)據(jù)，重載頁面筛圆。
換句話說裂明，一個單頁程序就像是一個安裝在本地APP一樣，使用起來比傳統(tǒng)的網(wǎng)頁更加的流暢太援。
我們可以用下面的命令安裝vue-router.
npm install vue-router --save
現(xiàn)在讓我們打開 src/main.js 文件夾把路由模塊配置到我們的程序里.
復(fù)制下面的內(nèi)容并替換原來的 src/main.js:
// 導(dǎo)入vue實(shí)例
import Vue from 'vue'
//導(dǎo)入 App 組件
import App from './App'
//導(dǎo)入 vue router
import VueRouter from 'vue-router'
//告訴vue使用vue-router路由組件
Vue.use(VueRouter)
//定義路由表
const routes = []
// 創(chuàng)建路由器實(shí)例闽晦，并且傳入`routes`變量作為路由。
// 你還可以傳入別的參數(shù)提岔，不過在這里盡量簡單化就可以了
const router = new VueRouter({
routes,
mode: 'history'
})
//實(shí)例化Vue實(shí)例
new Vue({
//定義Vue綁定的跟元素
el: '#app',
//用<App/>代替根元素
template: '<App/>',
//聲明App組件仙蛉，這樣上面的<App/>元素就可以生效
components: { App },
//將上面聲明的路由器傳遞到根Vue實(shí)例
router
}).$mount('#app')//將這個實(shí)例掛載到id=app的根元素上
讓我們屢一下上面這一段代碼，首先我們從node模塊中導(dǎo)入了vue模塊唧垦，接著我們又導(dǎo)入了App模塊(這個是本地定義的模塊)捅儒。
這個App模塊是我們在用vue cli腳手架創(chuàng)建這個項目的時候默認(rèn)幫我們創(chuàng)建的液样，作為我們整個項目的根模塊振亮。
之后巧还，我們導(dǎo)入了vue-router, 接著我們使用vue的靜態(tài)方法Vue.use，告訴vue我們將使用vue-router這個組件坊秸。
在下一行麸祷，我們定義了一個空的routes數(shù)組變量。每一個routes里面的元素為一條路由信息褒搔。當(dāng)前里面還沒有路由信息阶牍，后續(xù)會添加。
NOTE：注意英文中routes和router的區(qū)別星瘾，router是一個組件走孽，route是一條路由信息，routes是由多個路由信息(route)組成的路由表琳状。
可以這么理解磕瓷，把router當(dāng)成一個工人，這個工人(router)拿到一張由很多路由信息(route)組成的路由表(routes)念逞，然后每一次用戶請求頁面變化時困食，工人(router)會逐條比對路由表(routes)上的路由信息(route)，遇到第一條匹配的信息就將對應(yīng)的頁面反饋給用戶
接下來我們做的是創(chuàng)建我們的路由器(router)翎承，一個vue-router的實(shí)例硕盹，在這里我們給它傳入了兩個參數(shù)。
第一個參數(shù)是一個我們之前聲明過的數(shù)組變量叨咖，路由表(routers)瘩例，另一個參數(shù)在聲明一種路由模式，這種模式下我們在URL中不會看到前導(dǎo)的#號甸各。
有興趣的讀者可以試試不加這個參數(shù)觀察一下URL有什么變化仰剿。同時，去掉這個#號也會使SEO優(yōu)化更加好痴晦。
最后南吮，我們創(chuàng)建了一個Vue實(shí)例，傳入了根組件<App/>誊酌，聲明了Vue的掛載點(diǎn)部凑。
現(xiàn)在，如果我們重新運(yùn)行這個程序碧浊，會發(fā)現(xiàn)頁面沒有任何變化涂邀。下面我們將會開始設(shè)置路由。
我將會把路由管道標(biāo)簽(<router-view></router-view>)加入到根組件<App/>中箱锐，也就是當(dāng)url符合某個路由信息(route)時比勉，對應(yīng)的組件就會被渲染(render)到這個路由管道標(biāo)簽內(nèi)。
現(xiàn)在打開src/App.vue文件，也就是根組件文件浩聋，用下面的內(nèi)容替換原有的內(nèi)容：
<template>
<div id="app">
<!--路由管道標(biāo)簽观蜗，任何符合某一路由(route)信息的組件都會在這個標(biāo)簽內(nèi)展示出來 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
<!-- css格式 -->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
上面的代碼和用vue-cli自動生成的代碼有幾點(diǎn)不一樣：
- 多了 router-view 標(biāo)簽用來渲染符合路由條件的組件
- 刪除了導(dǎo)入hello組件的語句
import hello - 刪除了
script中關(guān)于component的定義 - 刪除了默認(rèn)的component是因為我們不需要了，因為我們在上面已經(jīng)定義了路由管道標(biāo)簽
<router-view>
這時候我們在重新運(yùn)行程序衣洁，會發(fā)現(xiàn)是空白頁面
路由初始化
這時候我們需要定義Hello模塊作為我們的Home頁面墓捻，然后把相應(yīng)的路由信息(route)加到路由表(routes)中
打開main.js文件，把routes變量修改成如下形式并導(dǎo)入Hello組件：
//導(dǎo)入hello組件
import Hello from './components/Hello'
//定義路由表
const routes = [
//將根URL加入到路由表并聲明對應(yīng)Hello組件.
{ path: '/', component: Hello }
]
在上面的代碼中我們引入了腳手架默認(rèn)添加的Hello組件坊夫，并且將根URL / 對應(yīng)到了Hello組件上砖第，這時候如果我們重新運(yùn)行程序，會像下面這樣：
上面這個圖片里环凿，Vue的logo已經(jīng)不見了梧兼，這是因為之前在APP組件中已經(jīng)將顯示VUE logo圖標(biāo)的代碼刪除了。
現(xiàn)在智听，讓我們定義更多的路由袱院，在這之前先再創(chuàng)建一個組件。
在 src/somponents 文件夾下創(chuàng)建一個 About.vue 文件瞭稼，然后把下面的代碼放進(jìn)去忽洛。
<template>
<div id="about">
When you have a great story about how your product or service was built to change lives, share it. The "About Us" page is a great place for it to live, too. Good stories humanize your brand, providing context and meaning for your product. What’s more, good stories are sticky -- which means people are more likely to connect with them and pass them on.
</div>
</template>
<script>
export default {
name: 'about'
}
</script>
<style>
#about {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
讓我們來看看上面這個About組件，這個組件里面只有簡單的一段話环肘，當(dāng)URL正好對應(yīng)這個組件的時候欲虚，它就會被渲染到<router-view>標(biāo)簽里面。
在這之前悔雹，我們需要在路由表中加入這個組件對應(yīng)的路由复哆。
打開 main.js 然后把路由表(routes)改成如下形式。
//導(dǎo)入Hello組件
import Hello from './components/Hello'
//導(dǎo)入Aboiut組件
import About from './components/About'
//定義路由表
const routes = [
//對應(yīng)Hello組件的路由地址
{ path: '/', component: Hello },
//對應(yīng)About組件的路由地址
{ path: '/about', component: About }
]
上面代碼唯一的改動就是增加了About組件的引入和對應(yīng)的路由信息腌零。
這時候如果我們在瀏覽器中訪問 http://localhost:8080/about 這個地址梯找，我們就會看到剛剛我們在About組件中寫的那段話。
在頁面中使用<router-link>標(biāo)簽
但是我們不能總是手工在瀏覽器中輸入地址去切換頁面益涧，所以我們需要用到另一個路由器標(biāo)簽<router-link></router-link>锈锤。
打開 App.vue 文件，然后在<router-view>標(biāo)簽上面加入兩個<router-link>標(biāo)簽：
<router-link v-bind:to="'/'">Home</router-link>
<router-link v-bind:to="'/about'">About</router-link>
上面兩個標(biāo)簽的作用就是創(chuàng)建兩個指向?qū)?yīng)URL的超鏈接闲询，用來做動態(tài)的路由轉(zhuǎn)換 (不用重載頁面的頁面轉(zhuǎn)換)久免。
這時候如果你重新啟動程序，會注意到頁面上多了兩個可以點(diǎn)擊的超鏈接扭弧，點(diǎn)擊任意一個阎姥，頁面和URL也會隨著變動，而且頁面并沒有重載鸽捻。
程序看起來是這個樣子的：
總結(jié)
好了呼巴，這就是如何構(gòu)建一個單頁程序(SPA)泽腮。
當(dāng)然，這個程序也可以構(gòu)建的更加復(fù)雜一些衣赶，比如：
- 添加更多的路由
- 通過路由傳遞參數(shù)信息
- 使用路由守護(hù)(route guards)來在保證沒有權(quán)限的用戶不能訪問特定頁面
在下一個教程中诊赊，我會分別介紹路由的參數(shù)傳遞和路由守護(hù)功能。
碼字不易屑埋，喜歡請點(diǎn)贊
