什么是路由

后端(duan)路由：對于普通(tong)的(de)網(wang)站，所(suo)有的(de)超(chao)鏈接(jie)都是URL地址，所(suo)有的(de)URL地址都對應服務器上對應的(de)資(zi)源；

前(qian)端路(lu)由：對于單頁面應用程序來說(shuo)，主(zhu)要通過(guo)URL中(zhong)的(de)hash(#號)來實現不同頁面之間的(de)切換(huan)，同時，hash有一個特點：HTTP請求中(zhong)不會包含hash相關的(de)內容(rong)；所以，單頁面程序中(zhong)的(de)頁面跳轉主(zhu)要用hash實現；

在單頁面應(ying)用程序(xu)中，這(zhe)種通過hash改變來切換頁面的方(fang)式，稱作前端(duan)路由（區別于后端(duan)路由）；

Vue路由基本使用

1. 基本使用

我們(men)先(xian)來看(kan)看(kan) 路由的基(ji)本使用，基(ji)礎頁面如下

1.1 引入vue-router

我們需要引入(ru)vue-router.js文件(jian)，而且必須是在vue.js文件(jian)之后引入(ru)

1.2 創建組件模板

創建兩個組件(jian)模板對象，如下

1.3 VueRouter實例

當(dang) 導(dao)入 vue-router 包之后，在(zai) window 全局對(dui)(dui)(dui)象中，就有了一(yi)個(ge) 路由的構造(zao)函數叫做(zuo) VueRouter,在(zai) new 路由對(dui)(dui)(dui)象的時(shi)候，可(ke)以為構造(zao)函數，傳遞一(yi)個(ge)配置對(dui)(dui)(dui)象。在(zai)配置對(dui)(dui)(dui)象中我(wo)們(men)可(ke)以來創(chuang)建我(wo)們(men)的路由規則

1.4 vm實例綁定

創建的(de)VueRouter對(dui)象我們還需要綁定到Vue實例中才有效(xiao)果

1.5 router-view

我(wo)(wo)們(men)想要使用router路由，那么我(wo)(wo)們(men)通過router-view標簽來占位我(wo)(wo)們(men)要顯示的(de)內容的(de)位置

router-view標簽(qian)是 vue-router 提供的元素，專門用(yong)來當作(zuo)占位符(fu)(fu)的，將來，路由規則(ze)，匹配到(dao)的組件，就會展(zhan)示到(dao)這(zhe)個 router-view 中去。所以(yi)：我們可以(yi)把 router-view 認為是一個占位符(fu)(fu)。

1.6 訪問

通過上(shang)面(mian)的演示我(wo)們(men)可以(yi)通過修改 #/后的內(nei)容來(lai) 觸發路由中(zhong)的規(gui)則，這(zhe)時我(wo)們(men)可以(yi)在頁面(mian)中(zhong)添加對(dui)應的操作(zuo)按鈕來(lai)便捷觸發。

2. 重定向

上面的(de)案例我(wo)們(men)實現了路由(you)的(de)基本使(shi)用，但是頁(ye)面第一次(ci)打開的(de)時候，是沒有路由(you)規則的(de)，這時我(wo)們(men)可以配置一個，如(ru)下

效果

有實現，但(dan)是地址顯示(shi)的是“/”,我們希(xi)望地址和(he)路由的結(jie)果(guo)是一(yi)致的，這時(shi)我們可以設(she)置(zhi)個重定(ding)向來處理。

3. router-link

我們可以用router-link標簽(qian)來替換掉 a標簽(qian)，這樣會(hui)更(geng)靈活些，如下

我(wo)們(men)發現router-link渲(xuan)染的(de)最終的(de)標簽(qian)也(ye)是 a 標簽(qian)，我(wo)們(men)可以通(tong)過(guo) router-link中的(de) tag屬性來修(xiu)改(gai) 渲(xuan)染的(de)標簽(qian)類型