路由模式解析

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

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

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

1.hash模式

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

2.history模式

美化后的hash模式，會去掉路徑中的 “#”。依賴于Html5 的history，pushState API,所以要擔(dān)心IE9以及一下的版本，感覺不用擔(dān)心。并且還包括back、forward、go三個方法，對應(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)，就怕刷新（如果后端沒有準(zhǔn)備的話），因?yàn)樗⑿率菍?shí)實(shí)在在地去請求服務(wù)器了。

總結(jié)一下

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

3.abstract模式

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

然后在

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

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

路由三個基本概念

路由中有三個基本的概念 route, routes, router

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

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

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

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

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

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

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

2. js 中配置路由

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

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

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

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

const router = new VueRouter({
routes // routes: routes 的簡寫
})

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

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

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

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

1.在src 目錄下新建兩個組件

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)航到哪個路徑下 -->
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
</header>
<!-- 對應(yīng)的組件內(nèi)容渲染到router-view中 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>

3.在 src目錄下再新建一個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í)例中，啟動路由

這里其實(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)擊頁面上的home 和about 可以看到組件來回切換

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

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

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

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

最新評論