路由模式解析

這里要講vue-router的路由模式，首先要了解的一點(diǎn)就是路由是由多個(gè)URL組成的，使用不同的URL可以相應(yīng)的導(dǎo)航到不同的位置。如果有進(jìn)行過(guò)服務(wù)器開(kāi)發(fā)或者對(duì)http協(xié)議有所了解就會(huì)知道，瀏覽器中對(duì)頁(yè)面的訪問(wèn)是無(wú)狀態(tài)的，所以我們?cè)谇袚Q不同的頁(yè)面時(shí)都會(huì)重新進(jìn)行請(qǐng)求。

而實(shí)際使用vue和vue-router開(kāi)發(fā)就會(huì)明白，在切換頁(yè)面時(shí)是沒(méi)有重新進(jìn)行請(qǐng)求也沒(méi)有重新刷新頁(yè)面，使用起來(lái)就好像頁(yè)面是有狀態(tài)的，這是什么原因呢。

這其實(shí)是借助了瀏覽器的History API來(lái)實(shí)現(xiàn)的，這樣可以使得頁(yè)面跳轉(zhuǎn)而不刷新，頁(yè)面的狀態(tài)就被維持在瀏覽器中了。

1.hash模式

使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)，頁(yè)面不會(huì)重新加載，其顯示的網(wǎng)路路徑中會(huì)有 “#” 號(hào)，有一點(diǎn)點(diǎn)丑。這是最安全的模式，因?yàn)樗嫒菟械臑g覽器和服務(wù)器。

2.history模式

美化后的hash模式，會(huì)去掉路徑中的 “#”。依賴于Html5 的history，pushState API,所以要擔(dān)心IE9以及一下的版本，感覺(jué)不用擔(dān)心。并且還包括back、forward、go三個(gè)方法，對(duì)應(yīng)瀏覽器的前進(jìn)，后退，跳轉(zhuǎn)操作。就是瀏覽器左上角的前進(jìn)、后退等按鈕進(jìn)行的操作。

history.go(-2);//后退兩次
history.go(2);//前進(jìn)兩次
history.back(); //后退
hsitory.forward(); //前進(jìn)

但是history也是有缺點(diǎn)的，不怕前進(jìn)后退跳轉(zhuǎn)，就怕刷新（如果后端沒(méi)有準(zhǔn)備的話），因?yàn)樗⑿率菍?shí)實(shí)在在地去請(qǐng)求服務(wù)器了。

總結(jié)一下

• hash模式（vue-router默認(rèn)模式URL后面帶#）使用URL的hash值來(lái)作為路由，支持所有瀏覽器 缺點(diǎn)：只能改變#后面的來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn)。
• history模式（通過(guò)mode: 'history’來(lái)改變?yōu)閔istory模式）HTML5 （BOM）History API 和服務(wù)器配置 缺點(diǎn)：怕刷新如果后端沒(méi)有處理這個(gè)情況的時(shí)候前端刷新就是實(shí)實(shí)在在的請(qǐng)求服務(wù)器這樣消耗的時(shí)間很多還很慢。

3.abstract模式

適用于所有JavaScript環(huán)境，例如服務(wù)器端使用Node.js。如果沒(méi)有瀏覽器API，路由器將自動(dòng)被強(qiáng)制進(jìn)入此模式。

然后在

const router = new VueRouter({routes, mode:'hash|history|abstract',})

這里進(jìn)行切換。

路由三個(gè)基本概念

路由中有三個(gè)基本的概念 route, routes, router

• route是一條路由，由這個(gè)英文單詞也可以看出來(lái)，它是單數(shù)， Home按鈕 => home內(nèi)容， 這是一條route, about按鈕 => about 內(nèi)容， 這是另一條路由
• routes 是一組路由，把上面的每一條路由組合起來(lái)，形成一個(gè)數(shù)組。[{home 按鈕 =>home內(nèi)容 }， { about按鈕 => about 內(nèi)容}]
• router 是一個(gè)機(jī)制，相當(dāng)于一個(gè)管理者，它來(lái)管理路由。因?yàn)閞outes 只是定義了一組路由，它放在哪里是靜止的。當(dāng)用戶點(diǎn)擊home 按鈕的時(shí)候，router 到routes 中去查找，去找到對(duì)應(yīng)的 home 內(nèi)容，所以頁(yè)面中就顯示了 home 內(nèi)容。

客戶端中的路由，實(shí)際上就是dom 元素的顯示和隱藏。當(dāng)頁(yè)面中顯示home 內(nèi)容的時(shí)候，about 中的內(nèi)容全部隱藏，反之也是一樣。客戶端路由有兩種實(shí)現(xiàn)方式：基于hash 和基于html5 history api.

router-view：主要是構(gòu)建 SPA (單頁(yè)應(yīng)用) 時(shí)，方便渲染你指定路由對(duì)應(yīng)的組件。你可以 router-view 當(dāng)做是一個(gè)容器，它渲染的組件是你使用 vue-router 指定的

vue中實(shí)現(xiàn)路由還是相對(duì)簡(jiǎn)單的

因?yàn)槲覀冺?yè)面中所有內(nèi)容都是組件化的，我們只要把路徑和組件對(duì)應(yīng)起來(lái)就可以了，然后在頁(yè)面中把組件渲染出來(lái)。

1.頁(yè)面實(shí)現(xiàn)（html模版中）

在vue-router中, 我們看到它定義了兩個(gè)標(biāo)簽<router-link> 和<router-view>來(lái)對(duì)應(yīng)點(diǎn)擊和顯示部分。<router-link> 就是定義頁(yè)面中點(diǎn)擊的部分，<router-view> 定義顯示部分，就是點(diǎn)擊后，區(qū)配的內(nèi)容顯示在什么地方。所以<router-link> 還有一個(gè)非常重要的屬性 to，定義點(diǎn)擊之后，要到哪里去， 如：<router-link to="/home">Home</router-link>

2. js 中配置路由

首先要定義route, 一條路由的實(shí)現(xiàn)。它是一個(gè)對(duì)象，由兩個(gè)部分組成： path和component. path 指路徑，component 指的是組件。如：{path:’/home’, component: home}

我們這里有兩條路由，組成一個(gè)routes：

const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]

最后創(chuàng)建router 對(duì)路由進(jìn)行管理，它是由構(gòu)造函數(shù) new vueRouter() 創(chuàng)建，接受routes 參數(shù)

const router = new VueRouter({
routes // routes: routes 的簡(jiǎn)寫(xiě)
})

配置完成后，把router 實(shí)例注入到 vue 根實(shí)例中,就可以使用路由了

const app = new Vue({
router
}).$mount('#app')

執(zhí)行過(guò)程：當(dāng)用戶點(diǎn)擊 router-link 標(biāo)簽時(shí)，會(huì)去尋找它的 to 屬性， 它的 to 屬性和 js中配置的路徑{ path: ‘/home’, component: Home} path 一一對(duì)應(yīng)，從而找到了匹配的組件， 最后把組件渲染到<router-view> 標(biāo)簽所在的地方。所有的這些實(shí)現(xiàn)才是基于hash 實(shí)現(xiàn)的。

vue-cli創(chuàng)建一個(gè)項(xiàng)目體驗(yàn)一下, 安裝vue-router

1.在src 目錄下新建兩個(gè)組件

home.vue 和 about.vue

<template>
<div>
<h1>home</h1>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: "我是home 組件"
? ? }
? }
}
</script>

<template>
<div>
<h1>about</h1>
<p>{{aboutMsg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
aboutMsg: '我是about組件'
}
}
}
</script>

2.在 App.vue中 定義<router-link > 和 </router-view>

<template>
<div id="app">
<img src="./assets/logo.png">
<header>
<!-- router-link 定義點(diǎn)擊后導(dǎo)航到哪個(gè)路徑下 -->
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
</header>
<!-- 對(duì)應(yīng)的組件內(nèi)容渲染到router-view中 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>

3.在 src目錄下再新建一個(gè)router.js 定義router

就是定義 路徑到 組件的 映射。

import Vue from "vue";
import VueRouter from "vue-router";
// 引入組件
import home from "./home.vue";
import about from "./about.vue";
// 要告訴 vue 使用 vueRouter
Vue.use(VueRouter);
const routes = [
{
path:"/home",
component: home
},
{
path: "/about",
component: about
}
]
var router = new VueRouter({
routes
})
export default router;

4.把路由注入到根實(shí)例中，啟動(dòng)路由

這里其實(shí)還有一種方法，就像vuex store 注入到根實(shí)例中一樣，我們也可以把vueRouter 直接注入到根實(shí)例中。在main.js中引入路由，注入到根實(shí)例中。

import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from "./router.js"
new Vue({
el: '#app',
router, // 注入到根實(shí)例中
render: h => h(App)
})

5.這時(shí)點(diǎn)擊頁(yè)面上的home 和about 可以看到組件來(lái)回切換

但是有一個(gè)問(wèn)題，當(dāng)首次進(jìn)入頁(yè)面的時(shí)候，頁(yè)面中并沒(méi)有顯示任何內(nèi)容。這是因?yàn)槭状芜M(jìn)入頁(yè)面時(shí)，它的路徑是 ‘/’，我們并沒(méi)有給這個(gè)路徑做相應(yīng)的配置。

一般，頁(yè)面一加載進(jìn)來(lái)都會(huì)顯示home頁(yè)面，我們也要把這個(gè)路徑指向home組件。但是如果我們寫(xiě){ path: ‘/’, component: Home },vue 會(huì)報(bào)錯(cuò)，因?yàn)閮蓷l路徑卻指向同一個(gè)方向。

這怎么辦？這需要重定向，所謂重定向，就是重新給它指定一個(gè)方向，它本來(lái)是訪問(wèn) / 路徑，我們重新指向‘/home’, 它就相當(dāng)于訪問(wèn) ‘/home’, 相應(yīng)地, home組件就會(huì)顯示到頁(yè)面上。vueRouter中用 redirect 來(lái)定義重定向。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。