路由模式解析

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

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

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

1.hash模式

使用 URL 的 hash 來模擬一個完整的 URL，于是當 URL 改變時，頁面不會重新加載，其顯示的網(wǎng)路路徑中會有 “#” 號，有一點點丑。這是最安全的模式，因為他兼容所有的瀏覽器和服務(wù)器。

2.history模式

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

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

但是history也是有缺點的，不怕前進后退跳轉(zhuǎn)，就怕刷新（如果后端沒有準備的話），因為刷新是實實在在地去請求服務(wù)器了。

總結(jié)一下

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

3.abstract模式

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

然后在

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

這里進行切換。

路由三個基本概念

路由中有三個基本的概念 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 是一個機制，相當于一個管理者，它來管理路由。因為routes 只是定義了一組路由，它放在哪里是靜止的。當用戶點擊home 按鈕的時候，router 到routes 中去查找，去找到對應(yīng)的 home 內(nèi)容，所以頁面中就顯示了 home 內(nèi)容。

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

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

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

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

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

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

2. js 中配置路由

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

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

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

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

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

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

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

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

vue-cli創(chuàng)建一個項目體驗一下, 安裝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 定義點擊后導航到哪個路徑下 -->
<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.把路由注入到根實例中，啟動路由

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

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

5.這時點擊頁面上的home 和about 可以看到組件來回切換

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

一般，頁面一加載進來都會顯示home頁面，我們也要把這個路徑指向home組件。但是如果我們寫{ path: ‘/’, component: Home },vue 會報錯，因為兩條路徑卻指向同一個方向。

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

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

最新評論