PS：轉(zhuǎn)載請注明出處
作者: TigerChain
地址http://www.reibang.com/p/9a7d79249741
本文出自 TigerChain 簡書 手把手教 Vue 系列
教程簡介
- 1、閱讀對象
本篇教程適合新手閱讀物咳，老手直接略過 - 2、教程難度
初級牡肉，本人水平有限巢掺，文章內(nèi)容難免會(huì)出現(xiàn)問題，如果有問題歡迎指出片仿，謝謝 - 3纹安、Demo 地址:https://github.com/tigerchain/vue-lesson 請看 06、Vue路由 這一節(jié)
- 4砂豌、演示地址
正文
一厢岂、什么是路由
以前在 React 的文章中說過路由這個(gè)東西，這里再說一下「再次加深一下記憶」阳距。路由是什么我們可能不太理解塔粒，但是我說一個(gè)東西我們一定知道，就是"路由器",路由器的功能用一句話概括就是：數(shù)據(jù)從一個(gè)網(wǎng)絡(luò)到另一個(gè)網(wǎng)絡(luò)就是靠路由器來完成的[當(dāng)然路由器的功能不僅僅于此]筐摘。
我們說的程序開發(fā)中的路由不是指路由器和網(wǎng)絡(luò)協(xié)議中的路由卒茬，但是基本思想是一樣的。而路由又分為前端路由和后端路由咖熟。
我們來看一個(gè)路由的簡易圖吧扬虚，有了這個(gè)圖，大家對路由就有一個(gè)大致的了解了球恤。
1辜昵、后端路由
舉個(gè)栗子，分配一個(gè)站點(diǎn)咽斧，服務(wù)器地址是：http://192.168.1.200:8899堪置，在這個(gè)網(wǎng)站中提供了三個(gè)界面
http://192.168.1.200:8899/index.html 主頁
http://192.168.1.200:8899/about/aboutus.html 關(guān)于我們頁面
http://192.168.1.200:8899/feedback.html 反饋界面
當(dāng)我們在瀏覽器輸入 http://192.168.1.200:8899/index.html 來仿問界面的時(shí)候，web 服務(wù)器就會(huì)接收到這個(gè)請求张惹，然后把 index.html 解析出來舀锨，并找到相應(yīng)的 index.html 并展示出來，這就是路由的分發(fā)宛逗，路由的分發(fā)是通過路由功能來完成的
2坎匿、前端路由
雖然前端路由和后端路由的實(shí)現(xiàn)方式不一樣，但是原理都有是相同的雷激，在 H5 的 history Api 出來之前替蔬，前端路由的功能都是通過 hash 「散列值」 來實(shí)現(xiàn)的，hash 能兼容低版本的瀏覽器
PS:后端路由每次仿問一個(gè)頁面都要向?yàn)g覽器發(fā)送請求屎暇，然后服務(wù)端再響應(yīng)解析承桥，在這個(gè)過程中肯定會(huì)存在延遲，但是前端路由中仿問一個(gè)新的界面的時(shí)候只是瀏覽器的路徑改變了根悼，沒有和服務(wù)端交互「所以不存在延遲」凶异，這個(gè)對用戶體驗(yàn)來說是大大的提高蜀撑。如下所示
http://192.168.1.200:8080/#/index.html
http://192.168.1.200:8080/#/about/aboutus.html
http://192.168.1.200:8080/#/feedback.html
由于 web 服務(wù)器不會(huì)解析 # 后面的東西「所以通過 hash 能提高性能」，但是客戶端的 js 可以拿到 # 后面的東西剩彬，有一個(gè)方法是 window.location.hash 來讀取酷麦，使用這個(gè)方法來匹配到不同的方法上「配合前端的一些邏輯操作就完成路由功能，剩下只是關(guān)心接口調(diào)用」
3喉恋、舉個(gè)栗子
假設(shè)有一個(gè)地址
http://www.xxx.com/path/a/b/c.html?key1=Tiger && key2=Chain && key3=fuck#/path/d/e.html
- 1贴铜、我們把這個(gè)地址分析一下「這個(gè)地址基本上包含了一個(gè)復(fù)雜地址的所有情況」
http:協(xié)議
www.xxx.com:域名
/path/a/b/c.html:路由，即服務(wù)器上的資源
?key1=Tiger && key2=Chain && key3=fuck：這個(gè)很好理解 Get 請求的參數(shù)
#/path/d/e.html：hash 也叫散列值瀑晒，也叫錨點(diǎn)
上面的 hash 是和瀏覽器交互的绍坝，其它的都是和服務(wù)器進(jìn)行交互
通過上述我們知道，前端路由的實(shí)現(xiàn)方式有兩種：
（1）苔悦、一是改變 hash 值轩褐，監(jiān)聽 hashchange 事件，可以兼容低版本瀏覽器
（2）玖详、二是通過 H5 的 history API 來監(jiān)聽 popState 事件把介，使用 pushState 和 replaceState 實(shí)現(xiàn)
- 2、hash 改變蟋座，不會(huì)導(dǎo)致瀏覽器刷新「請求服務(wù)器」拗踢，我們來寫個(gè) demo 驗(yàn)證一下
先看一下效果圖
從圖中我們可以看到，使用 hash 并不會(huì)導(dǎo)致瀏覽器刷新,并且我們 js 拿到了 hash 值并且打印出來了
- 3向臀、源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hash 實(shí)現(xiàn)前端路由</title>
<style>
#nav {
margin: 0;
border:0;
height: 40px;
border-top: #060 2px solid;
margin-top: 10px;
border-bottom: #060 2px solid;
background-color: red;
}
#nav ul {
margin: 0;
border: 0;
list-style: none;
line-height: 40px;
}
#nav li {
display: block;
float: left;
}
#nav a {
display: block;
color: #fff;
text-decoration: none;
padding: 0 20px;
}
#nav a:hover {
background-color: orange;
}
</style>
</head>
<body>
<h3>使用 hash 實(shí)現(xiàn)前端路由</h3>
<hr/>
<a href="#hash1">#hash1</a>
<a href="#hash2">#hash2</a>
<a href="#hash3">#hash3</a>
<a href="#hash4">#hash4</a>
<p/>
<div id = "show-hash-result" style="color:blue">
點(diǎn)擊上面鏈接巢墅，并觀察瀏覽器
</div>
<h4>定義一個(gè)簡單的 tab 路由頁面</h4>
<div id="nav">
<ul>
<li><a href="#/index.html">首頁</a></li>
<li><a href="#/server">服務(wù)</a></li>
<li><a href="#/mine">我的</a></li>
</ul>
</div>
<div id="result"></div>
<script type="text/javascript">
window.addEventListener("hashchange", function(){
//變化后輸出當(dāng)前地址欄中的值
document.getElementById("show-hash-result").innerHTML = "當(dāng)前的 hash 值是: "+location.hash;
//打印出當(dāng)前 hash 值
console.log("當(dāng)前的 hash 值是:"+window.location.hash) ;
});
</script>
<!-- 定義 router 的 js 代碼塊 -->
<script type="text/javascript">
//自定義一個(gè)路由規(guī)則
function CustomRouter(){
this.routes = {};
this.curUrl = '';
this.route = function(path, callback){
this.routes[path] = callback || function(){};
};
this.refresh = function(){
if(location.hash.length !=0){ // 如果 hash 存在
this.curUrl = location.hash.slice(1) || '/';
if(this.curUrl.indexOf('/')!=-1){ //這里粗略的把 hash 過濾掉
this.routes[this.curUrl]();
}
}
};
this.init = function(){
window.addEventListener('load', this.refresh.bind(this), false);
window.addEventListener('hashchange', this.refresh.bind(this), false);
}
}
//使用路由規(guī)則
var R = new CustomRouter();
R.init();
var res = document.getElementById('result');
R.route('/hash1',function () {
document.getElementById("show-hash-result").innerHTML = location.hash;
})
R.route('/index.html', function() {
res.style.height='150px';
res.style.width='300px';
res.style.background = 'green';
res.innerHTML = '<html>我是首頁</html>';
});
R.route('/server', function() {
res.style.height='150px';
res.style.width='300px';
res.style.background = 'orange';
res.innerHTML = '我是服務(wù)頁面';
});
R.route('/mine', function() {
res.style.background = 'red';
res.style.height='150px';
res.style.width='300px';
res.innerHTML = '我的界面';
});
</script>
</body>
</html>
以上代碼只是為了演示前端路由的作用，一般情況下券膀，這種路由我們是不需要自己寫的君纫，使用 react/vue 都會(huì)有相應(yīng)的路由工具類,我們發(fā)現(xiàn)了 hash 只會(huì)改變?yōu)g覽器地址，不會(huì)刷新瀏覽器
- H5 的 history
window 的 history 提供了對瀏覽器歷史記錄的訪問功能芹彬，并且它暴露了一些方法和屬性蓄髓，讓你在歷史記錄中自由的前進(jìn)和后退，并且在 H5 中還可以操作歷史記錄中的數(shù)據(jù)舒帮。
我們在 chrome 瀏覽器的調(diào)試窗口中在 Console 中輸入 window.history,會(huì)得到 history 的一些方法和屬性会喝，如下圖所示
總結(jié)一下 history 的 API 如下：
interface History {
readonly attribute long length;
readonly attribute any state;
void go(optional long delta);
void back();
void forward();
//h5 引進(jìn)以下兩個(gè)方法
void pushState(any data, DOMString title, optional DOMString? url = null);
void replaceState(any data, DOMString title, optional DOMString? url = null);
};
- 1、
back():在歷史記錄中后退
history.back() ;
- 2玩郊、
forward:在歷史記錄中前進(jìn)
history.forward();
- 3肢执、
go():移動(dòng)到指定的歷史記錄點(diǎn)
history.go(-1)
其中正數(shù)是前進(jìn)「+1就是前進(jìn)一個(gè)界面」，負(fù)責(zé)是后退的意思「-1就是后退一個(gè)界面」
4瓦宜、
length:hisgory 的屬性蔚万，顯示 history 的長度5、
pushState(data,title[,url]):給歷史記錄堆棧頂部添加一條記錄
history.pushState(data,title[,url])
如果想更進(jìn)一步的了解 H5 的 history 临庇，推薦看這里:https://developer.mozilla.org/en-US/docs/Web/API/History_API反璃，非常值得一看
從上面我們了解到，使用 H5 的 history 的 pushState 可以代替 hash假夺，并且更加優(yōu)雅,廢話不多說淮蜈，我們直接上效果圖
從效果圖中我們可以看到前端路由實(shí)現(xiàn)了，點(diǎn)擊各個(gè)導(dǎo)航?jīng)]有刷新瀏覽器已卷，并且點(diǎn)擊瀏覽器的回退按鈕梧田，會(huì)顯示上一次記錄，這都是使用 h5 history 的 pushState 和監(jiān)聽 onpopstate 實(shí)現(xiàn)的侧蘸，這就是一個(gè)簡單的 SPA ,基本上實(shí)現(xiàn)了和上面 hash 一樣的功能
源碼
我們只看核心代碼
<h4>使用 h5 實(shí)現(xiàn)前端路由</h4>
<ul>
<li> <a onclick="home()">首頁</a></li>
<li> <a onclick="message()">消息</a></li>
<li> <a onclick="mine()">我的</a></li>
</ul>
<div id="showContent" style="height:240px;width:200px;background-color:red">
home
</div>
<script type="text/javascript">
function home() {
// 添加到歷史記錄棧中
history.pushState({name:'home',id:1},null,"?page=home#index")
showCard('home')
};
function message() {
history.pushState({name:'message',id:2},null,"?page=message#haha")
showCard('message')
}
function mine(){
history.pushState({
id:3,
name:'mine'
},null,"?name=tigerchain&&sex=man")
showCard('mine')
}
// 監(jiān)聽瀏覽器回退 并且刷新到指定內(nèi)容
window.addEventListener('popstate',function (event) {
var content = "";
if(event.state) {
content = event.state.name;
}
console.log(event.state)
console.log("history 中的歷史棧中的 name ："+content)
showCard(content)
})
// 此方法和上面的方法是一毛一樣的裁眯，只是兩種不同的寫法而已
// window.onpopstate = function (event) {
// var content = "";
// if(event.state) {
// content = event.state.name;
// }
// showCard(content);
// }
function showCard(name) {
console.log("當(dāng)前的 hash 值是："+location.hash)
document.getElementById("showContent").innerHTML = name;
}
</script>
以上就是通過 H5 的 history 實(shí)現(xiàn)的一個(gè)前端路由
我們稍微總結(jié)一下：
http://192.168.1.200:8080/index
http://192.168.1.200:8080/about/aboutus.html/#/flag=1
http://192.168.1.200:8080/feedback
- 后端路由：每次仿問都要向 server 發(fā)送一個(gè)請求，server 需要響應(yīng)解析讳癌，會(huì)有延遲「網(wǎng)絡(luò)不好更嚴(yán)重」
- 前端路由：只是改變?yōu)g覽器的地址穿稳，不刷新瀏覽器，不和服務(wù)端交互晌坤，所以性能有大大的提高「用戶體驗(yàn)提高」逢艘，并且前端路由有兩種實(shí)現(xiàn)方式
(1)、實(shí)現(xiàn) hash 并監(jiān)聽 hashchange 事件來實(shí)現(xiàn)
(2)骤菠、使用 H5 的 hisgory 的 pushState() 監(jiān)聽 popstate 方法來實(shí)現(xiàn)
到這里它改，我們大概對路由有一個(gè)整體的了解了,下面我們看看 veu 的路由
二、Vue 路由
Vue 中的路由商乎，推薦使用官方支持的 vue-router 庫央拖，當(dāng)然我們可以不使用 vue-router 可以使用三方的路由庫，或者自己牛 b 完全可以自己寫一個(gè)路由庫「使用 hash 或 history」
本文中我們使用 vue-router 3.0.1來講解鹉戚，考慮到團(tuán)隊(duì)開發(fā)協(xié)作爬泥，我們先寫一個(gè)使用 html 引入 vue.js 的方式來使用 vue-router,后面專注說使用模塊化開發(fā)「使用 vue-cli 創(chuàng)建項(xiàng)目中使用 vue-router,這應(yīng)該是團(tuán)隊(duì)開發(fā)的最佳方式」
html 中 引入 vue-router
1、廢話不多了崩瓤，直接寫一個(gè)簡單的 SPA 應(yīng)用來感受一下
效果如下：
從上圖中我們可以看到袍啡，我們使用 vue-router 實(shí)現(xiàn)了一個(gè)簡單的類 hash 的路由功能
2、源碼
- 1却桶、引入 vue.js 和 vue-router.js
- 2境输、定義 Main、Message颖系、Mine 組件
- 3嗅剖、聲明路由規(guī)則
聲明路由規(guī)則，把路徑所對應(yīng)要跳轉(zhuǎn)的組件先定義出來「相當(dāng)于一個(gè)配置項(xiàng)」嘁扼，到時(shí)候?yàn)g覽器地址指定到對應(yīng)的路由下會(huì)自動(dòng)跳轉(zhuǎn)到所對應(yīng)的組件「這樣就完成了路由功能」
- 4信粮、創(chuàng)建 router 實(shí)例
創(chuàng)建 router 實(shí)例，并把 routes 傳遞進(jìn)去
- 5趁啸、注冊 router「把 router 注入到指定的掛載點(diǎn)下」
經(jīng)過以上幾步强缘，路由功能就完成了督惰，我們現(xiàn)在定義了路徑，定義了路由所對應(yīng)的組件旅掂，那組件要顯示在哪里呢赏胚？那就前面 1 中的圖中所顯示的 <router-view /> 中
可是如何讓我在點(diǎn)擊不同的按鈕進(jìn)不同的路由「不是的組件呢？」商虐，這里就要使用到 <router-link to="路由配置中的路徑">比如首頁<router-link />觉阅，從名字就可以看出來就是路由鏈接到那個(gè)路徑，路徑會(huì)匹配出相應(yīng)的組件顯示在 router-view 中
這樣我們就完成了 vue-router 的基本使用秘车，使用聲明式導(dǎo)航 <router-link :to="..."> 「其實(shí)就是創(chuàng)建了一個(gè) a 標(biāo)簽」來完成了導(dǎo)航的鏈接
模塊化「組件式開發(fā)」中 vue-router 的使用
如果使用 vue 開發(fā)手機(jī) webapp 典勇，那么頁面跳轉(zhuǎn)就非常多，路由使用的非常非常多叮趴，這樣就更能體現(xiàn)出路由的強(qiáng)大之處割笙，在這里我們使用 vue-cli 來創(chuàng)建一個(gè) webapp ,來模擬一個(gè)簡單的手機(jī) app ，體驗(yàn)一下路由
效果如下：
- 1疫向、初始化項(xiàng)目
使用 vue-cli 命令創(chuàng)建項(xiàng)目的時(shí)候咳蔚，我們選擇安裝 vue-router，默認(rèn)進(jìn)去項(xiàng)目中就會(huì)有 vue-router 的配置搔驼，創(chuàng)建好的項(xiàng)目結(jié)構(gòu)如下：
我們看到創(chuàng)建的目錄結(jié)構(gòu)多了一個(gè) router 目錄和 index.js 文件「vue-cli默認(rèn)給添加的谈火，如果你選了安裝 vue-router 的話」
- 2、文件簡單的分析
我們來看看 router 下的 index.js「路由配置文件」
我們可以看到默認(rèn) vue-cli 創(chuàng)建的帶路由的項(xiàng)目把 router 配置文件單獨(dú)的寫在了 router/index.js 文件中了舌涨，并且我們看到默認(rèn)指定打開的是 HelloWorld 組件「想配置路由組件糯耍，引入組件配置即可」
再看 main.js
一般來說 APP.vue 就是我們應(yīng)用的首頁，我們在 main.js 中注入路由囊嘉，從而讓整個(gè)應(yīng)用都具有路由功能
- 3温技、再看 App.vue
核心就一個(gè) <router-view/> 即可路由組件要顯示的地方，默認(rèn)路由路徑是 / 對應(yīng)的是 HelloWorld 組件扭粱，所以運(yùn)行起應(yīng)用就會(huì)顯示 HelloWorld 組件舵鳞，這里不顯示運(yùn)行后的結(jié)果了，我們使用 vue-cli 創(chuàng)建的 demo 樣式看的太多了琢蛤，自行運(yùn)行查看即可
經(jīng)過以上分析蜓堕，我們基本上就把 vue-cli 帶路由的 demo 說完了「核心就這幾個(gè)東西，剩下的無非就是配置路由博其，然后組件組合套才，然后各種路由跳轉(zhuǎn)」
- 4、修改 demo慕淡，一步步修改成效果圖的樣式
添加 First.vue 文件「核心代碼
樣式和數(shù)據(jù)「mockList 就是一個(gè)數(shù)組」就不截圖了背伴，完整例子可以查看 源碼:https://github.com/tigerchain/vue-lesson/tree/master/06、Vue路由/vue-cli-router-webapp
其中的條目點(diǎn)擊方法 nav(index) 就是路由跳轉(zhuǎn)功能
以上點(diǎn)擊方法我們使用編程式導(dǎo)航「跳轉(zhuǎn)」,當(dāng)然你也可以不傳參數(shù)
this.$router.push({name:xxx,params:{xxxx}})
細(xì)心的朋友會(huì)發(fā)現(xiàn),我們這個(gè) name 叫 second 這是那里來的,它其實(shí)就是我們在 router/index.js 中配置的別名,再看 router/index.js 文件之前,我們先添加一個(gè) Second.vue 組件
添加 Second.vue 組件「核心代碼
這個(gè)沒有什么好說的,就是一個(gè)有導(dǎo)航條并且接收到 First.vue 路由跳轉(zhuǎn)傳遞過來的參數(shù)
修改 router/index.js 文件
前面我們使用跳轉(zhuǎn) this.$router.push({name:'second',params:{itemData:this.mockList[index]}}) 中傳了一個(gè) name 為 second ,我們說了這是在 router/indes.js 中配置的,下面我們來看此文件
我們看到 / 對應(yīng)的是 First 組件,/second 對應(yīng)的是 Second 組件,并且分別給了 name 屬性「在路由 push 的時(shí)候就可以使用到」,沒什么好說的,當(dāng)然你也可以不寫 name 屬性，路由跳轉(zhuǎn)有幾種寫法
// 命名的路由
router.push({ path: '/second', params: { xxx:xxx }})
// 對象
router.push({ name: 'second', params: { xxx:xxx }})
等幾種方式,如果有 name 屬性直接使用即可,如果沒有就使用 path「router/inde.js 中配置的路由 path」 即可,具體可以看官網(wǎng):https://router.vuejs.org/zh-cn/essentials/navigation.html
如果想返回上一個(gè)界面,那么就使用 this.$router.go(-1) 和 h5 的 history 是一樣的
修改 App.vue
我們來修改 App.vue 來讓每個(gè)組件的內(nèi)容都能全屏顯示「我這里使用的 flexbox 布局,具體看源碼」
這沒有什么好說的,都是一些 css 樣式的設(shè)置
運(yùn)行查看效果
從效果圖中我們可以看到我們已經(jīng)實(shí)現(xiàn)了兩個(gè)界面之間的跳轉(zhuǎn)「通過路由功能」只不過這個(gè)界面跳轉(zhuǎn)有點(diǎn)生硬傻寂，顯的很不友好息尺，下面我們給界面跳轉(zhuǎn)添加一個(gè)動(dòng)畫
添加界面跳轉(zhuǎn)動(dòng)畫
說到 vue 的跳轉(zhuǎn)動(dòng)畫，我們就要說說 transition 過度效果崎逃，簡單的說 transition 就是控制組件或標(biāo)簽的進(jìn)入和離開的過度「這里不過多的介紹掷倔，我們看如何修改代碼
修改 App.vue
- 第一步：給 router-view 添加過慮效果
- 第二步：給 transitionName 設(shè)置個(gè)屬性值
在這里我們給 transitionName 設(shè)置一個(gè)值「這個(gè)值可以隨便起一個(gè)名字眉孩，這里我就叫做 slide-right,向右滑動(dòng)」
- 第三步：給 transitionName 添加進(jìn)入个绍，退出效果
這里我們給過度設(shè)置效果，一般使用 name-enter「過渡開始的狀態(tài)」 name-enter-active「定義進(jìn)入過渡的狀態(tài)」浪汪、name-leave「離開過渡的開始狀態(tài)」巴柿、name-leave-active「離開的過度狀態(tài)」，其中 name 是可以的值是可以動(dòng)態(tài)設(shè)置的死遭，類如上面的 slide-right 和 slide-left广恢，但是后面的部分是固定的，下面我們來使用 name
- 第四步：監(jiān)聽路由變化
我們先把路由定義一個(gè)統(tǒng)一的返回方法呀潭，打開 router/index.js钉迷，添加如下代碼，使用 js 的 prototype「prototype 屬性使您有能力向?qū)ο筇砑訉傩院头椒ā?屬性即可
這樣一來钠署，router 就有了統(tǒng)一的返回方法糠聪，直接調(diào)用即可，我們修改返回按鈕的返回方法如下：
this.$router.goBack()
- 第五步：監(jiān)聽路由變化
在這里我們使用到了 Vue 的 watch「這里不專門說谐鼎，以后有需要會(huì)抽出來說」 方法舰蟆，修改如下：
這樣我們就可以監(jiān)聽是進(jìn)入界面還是返回界面「這里 watch 和 data 方法是平級的，如果是返回的話狸棍，則從左邊滑入到右邊身害，打開新界面就是從右邊滑到左邊」
通過以上步驟，我們就給路由添加了一個(gè)過渡效果草戈，我們來看看效果塌鸯，就和剛開始的效果圖是一樣的
這樣我就完成了組件式開發(fā)中的路由的基本功能，結(jié)束了嗎唐片？這里本應(yīng)該可以結(jié)束了丙猬，但是我們前面學(xué)過組件，并且 vue 的核心特點(diǎn)之一就是組件化開發(fā)牵触，我們這里使用的頭部功能「兩個(gè)界面頭部如下」
我們可以看到兩個(gè)界面的頭部是何其的相似淮悼，這里我們完全可以把這個(gè)頭部封裝成一個(gè)組件呀，下面我們繼續(xù)改造我們的代碼
封裝頭部組件
- 1揽思、新建一個(gè) Head.vue 文件「核心代碼」
- 2袜腥、在 First.vue 和 Second.vue 中引入
分三步：
第一步：引入組件
第二步：注冊組件
第三步：使用組件
想在那個(gè) vue 組件中使用以上三步就可以搞定了
到這里我們就把 head 組件封裝完成了，并且達(dá)到使用的上的，具體可以看源代碼
到此為止羹令，我們把 vue-router 就介紹完了鲤屡，總結(jié)一下
三、總結(jié)
- 路由的分類：前端路由和后端路由「區(qū)別和聯(lián)系」
- 使用 hash 和 history 分別實(shí)現(xiàn)前端路由
- vue-router 的基本使用方法「使用 html 引入和模塊化開發(fā)兩種方式」
- vue-router 的舉例子「手機(jī)端開發(fā) webapp」
點(diǎn)贊富一生福侈，轉(zhuǎn)發(fā)富五代酒来，更多文章請關(guān)注我的微信公號來查閱
公眾號：TigerChain
