? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 本文轉(zhuǎn)載于前端工匠厨内。如有侵權(quán)聯(lián)系本人立刻刪除
一祈秕、首先帶著問(wèn)題
要學(xué)習(xí)vue-router就要先知道這里的路由是什么渺贤？為什么我們不能像原來(lái)一樣直接用標(biāo)簽編寫鏈接哪？vue-router如何使用请毛？常見路由操作有哪些志鞍？等等這些問(wèn)題，就是本篇要探討的主要問(wèn)題方仿。
二固棚、vue-router是什么
這里的路由并不是指我們平時(shí)所說(shuō)的硬件路由器，這里的路由就是SPA（單頁(yè)應(yīng)用）的路徑管理器仙蚜。再通俗的說(shuō)此洲，vue-router就是WebApp的鏈接路徑管理系統(tǒng)。 vue-router是Vue.js官方的路由插件委粉，它和vue.js是深度集成的呜师，適合用于構(gòu)建單頁(yè)面應(yīng)用。vue的單頁(yè)面應(yīng)用是基于路由和組件的贾节，路由用于設(shè)定訪問(wèn)路徑汁汗，并將路徑和組件映射起來(lái)。傳統(tǒng)的頁(yè)面應(yīng)用栗涂，是用一些超鏈接來(lái)實(shí)現(xiàn)頁(yè)面切換和跳轉(zhuǎn)的知牌。在vue-router單頁(yè)面應(yīng)用中，則是路徑之間的切換斤程，也就是組件的切換角寸。路由模塊的本質(zhì) 就是建立起url和頁(yè)面之間的映射關(guān)系。
至于我們?yōu)樯恫荒苡胊標(biāo)簽暖释，這是因?yàn)橛肰ue做的都是單頁(yè)應(yīng)用（當(dāng)你的項(xiàng)目準(zhǔn)備打包時(shí)袭厂，運(yùn)行npm run build時(shí)，就會(huì)生成dist文件夾球匕，這里面只有靜態(tài)資源和一個(gè)index.html頁(yè)面）纹磺，所以你寫的標(biāo)簽是不起作用的，你必須使用vue-router來(lái)進(jìn)行管理亮曹。
三橄杨、vue-router實(shí)現(xiàn)原理
SPA(single page application):單一頁(yè)面應(yīng)用程序，只有一個(gè)完整的頁(yè)面照卦；它在加載頁(yè)面時(shí)式矫，不會(huì)加載整個(gè)頁(yè)面，而是只更新某個(gè)指定的容器中內(nèi)容役耕。單頁(yè)面應(yīng)用(SPA)的核心之一是: 更新視圖而不重新請(qǐng)求頁(yè)面;vue-router在實(shí)現(xiàn)單頁(yè)面前端路由時(shí)采转，提供了兩種方式：Hash模式和History模式；根據(jù)mode參數(shù)來(lái)決定采用哪一種方式。
1故慈、Hash模式：
vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL板熊，于是當(dāng) URL 改變時(shí)，頁(yè)面不會(huì)重新加載察绷。hash（#）是URL 的錨點(diǎn)干签，代表的是網(wǎng)頁(yè)中的一個(gè)位置，單單改變#后的部分拆撼，瀏覽器只會(huì)滾動(dòng)到相應(yīng)位置容劳，不會(huì)重新加載網(wǎng)頁(yè)，也就是說(shuō)hash 出現(xiàn)在 URL 中闸度，但不會(huì)被包含在 http 請(qǐng)求中竭贩，對(duì)后端完全沒有影響，因此改變 hash 不會(huì)重新加載頁(yè)面筋岛；同時(shí)每一次改變#后的部分娶视，都會(huì)在瀏覽器的訪問(wèn)歷史中增加一個(gè)記錄晒哄，使用”后退”按鈕睁宰，就可以回到上一個(gè)位置；所以說(shuō)Hash模式通過(guò)錨點(diǎn)值的改變寝凌，根據(jù)不同的值柒傻，渲染指定DOM位置的不同數(shù)據(jù)。hash 模式的原理是 onhashchange 事件(監(jiān)測(cè)hash值變化)较木，可以在 window 對(duì)象上監(jiān)聽這個(gè)事件红符。
2、History模式：
由于hash模式會(huì)在url中自帶#伐债，如果不想要很丑的 hash预侯，我們可以用路由的 history 模式，只需要在配置路由規(guī)則時(shí)峰锁，加入"mode: 'history'",這種模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法萎馅。這兩個(gè)方法應(yīng)用于瀏覽器記錄棧，在當(dāng)前已有的 back虹蒋、forward糜芳、go 基礎(chǔ)之上，它們提供了對(duì)歷史記錄修改的功能魄衅。只是當(dāng)它們執(zhí)行修改時(shí)峭竣，雖然改變了當(dāng)前的 URL ，但瀏覽器不會(huì)立即向后端發(fā)送請(qǐng)求晃虫。
//main.js文件中
const router = new VueRouter({
? mode: 'history',
? routes: [...]
})
當(dāng)你使用 history 模式時(shí)皆撩，URL 就像正常的 url，例如 http://yoursite.com/user/id哲银，比較好看扛吞！ 不過(guò)這種模式要玩好沮榜，還需要后臺(tái)配置支持。因?yàn)槲覀兊膽?yīng)用是個(gè)單頁(yè)客戶端應(yīng)用喻粹，如果后臺(tái)沒有正確的配置蟆融，當(dāng)用戶在瀏覽器直接訪問(wèn) http://oursite.com/user/id 就會(huì)返回 404，這就不好看了守呜。 所以呢型酥，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁(yè)面查乒，這個(gè)頁(yè)面就是你 app 依賴的頁(yè)面弥喉。
export const routes = [
? {path: "/", name: "homeLink", component:Home}
? {path: "/register", name: "registerLink", component: Register},
? {path: "/login", name: "loginLink", component: Login},
? {path: "*", redirect: "/"}
]
此處就設(shè)置如果URL輸入錯(cuò)誤或者是URL 匹配不到任何靜態(tài)資源，就自動(dòng)跳到到Home頁(yè)面
3玛迄、使用路由模塊來(lái)實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方式
方式1：直接修改地址欄
方式2：this.$router.push(‘路由地址’)
方式3：<router-linkto="路由地址"></router-link>
四由境、vue-router使用方式
1:下載npm i vue-router-S
2:在main.js中引入importVueRouterfrom'vue-router';
3:安裝插件Vue.use(VueRouter);
4:創(chuàng)建路由對(duì)象并配置路由規(guī)則
let router = new VueRouter({routes:[{path:'/home',component:Home}]});
5:將其路由對(duì)象傳遞給Vue的實(shí)例，options中加入router:router
6:在app.vue中留坑<router-view></router-view>
具體實(shí)現(xiàn)請(qǐng)看如下代碼：
//main.js文件中引入
import Vue from 'vue';
import VueRouter from 'vue-router';
//主體
import App from './components/app.vue';
import Home from './components/home.vue'
//安裝插件
Vue.use(VueRouter); //掛載屬性
//創(chuàng)建路由對(duì)象并配置路由規(guī)則
let router = new VueRouter({
? ? routes: [
? ? ? ? //一個(gè)個(gè)對(duì)象
? ? ? ? { path: '/home', component: Home }
? ? ]
});
//new Vue 啟動(dòng)
new Vue({
? ? el: '#app',
? ? //讓vue知道我們的路由規(guī)則
? ? router: router, //可以簡(jiǎn)寫router
? ? render: c => c(App),
})
最后記得在在app.vue中“留坑”
//app.vue中
<template>
? ? <div>
? ? ? ? <!-- 留坑蓖议，非常重要 -->
? ? ? ? <router-view></router-view>
? ? </div>
</template>
<script>
? ? export default {
? ? ? ? data(){
? ? ? ? ? ? return {}
? ? ? ? }
? ? }
</script>
五虏杰、vue-router參數(shù)傳遞
聲明式的導(dǎo)航 <router-link:to="...">和編程式的導(dǎo)航 router.push(...)都可以傳參，本文主要介紹前者的傳參方法勒虾，同樣的規(guī)則也適用于編程式的導(dǎo)航纺阔。
1、用name傳遞參數(shù)
在路由文件src/router/index.js里配置name屬性
routes: [
? ? {
? ? ? path: '/',
? ? ? name: 'Hello',
? ? ? component: Hello
? ? }
]
模板里(src/App.vue)用 $route.name來(lái)接收 比如： <p>{{ $route.name}}</p>
2修然、通過(guò)<router-link>標(biāo)簽中的to傳參
這種傳參方法的基本語(yǔ)法：
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
比如先在src/App.vue文件中
<router-link :to="{name:'hi1',params:{username:'jspang',id:'555'}}">Hi頁(yè)面1</router-link>
然后把src/router/index.js文件里給hi1配置的路由起個(gè)name,就叫hi1.
{path:'/hi1',name:'hi1',component:Hi1}
最后在模板里(src/components/Hi1.vue)用 $route.params.username進(jìn)行接收.
{{$route.params.username}}-{{$route.params.id}}
3笛钝、利用url傳遞參數(shù)----在配置文件里以冒號(hào)的形式設(shè)置參數(shù)。
我們?cè)?src/router/index.js文件里配置路由
{
? ? path:'/params/:newsId/:newsTitle',
? ? component:Params
}
我們需要傳遞參數(shù)是新聞ID（newsId）和新聞標(biāo)題（newsTitle）.所以我們?cè)诼酚膳渲梦募镏贫诉@兩個(gè)值愕宋。
在src/components目錄下建立我們params.vue組件玻靡，也可以說(shuō)是頁(yè)面。我們?cè)陧?yè)面里輸出了url傳遞的的新聞ID和新聞標(biāo)題中贝。
<template>
? ? <div>
? ? ? ? <h2>{{ msg }}</h2>
? ? ? ? <p>新聞ID：{{ $route.params.newsId}}</p>
? ? ? ? <p>新聞標(biāo)題：{{ $route.params.newsTitle}}</p>
? ? </div>
</template>
<script>
export default {
?name: 'params',
? data () {
? ? return {
? ? ? msg: 'params page'
? ? }
? }
}
</script>
在App.vue文件里加入我們的 <router-view>標(biāo)簽囤捻。這時(shí)候我們可以直接利用url傳值了
<router-link to="/params/198/jspang website is very good">params</router-link>
4、使用path來(lái)匹配路由雄妥，然后通過(guò)query來(lái)傳遞參數(shù)
<router-link :to="{ name:'Query',query: { queryId: status }}" >
? ? router-link跳轉(zhuǎn)Query
</router-link>
對(duì)應(yīng)路由配置：
{
? ? path: '/query',
? ? name: 'Query',
? ? component: Query
? }
于是我們可以獲取參數(shù)：
this.$route.query.queryId
六最蕾、vue-router配置子路由(二級(jí)路由)
如何實(shí)現(xiàn)下圖效果(H1頁(yè)面和H2頁(yè)面嵌套在主頁(yè)中)？
1.首先用標(biāo)簽增加了兩個(gè)新的導(dǎo)航鏈接
<router-link :to="{name:'HelloWorld'}">主頁(yè)</router-link>
<router-link :to="{name:'H1'}">H1頁(yè)面</router-link>
<router-link :to="{name:'H2'}">H2頁(yè)面</router-link>
2.在HelloWorld.vue加入 <router-view>標(biāo)簽老厌，給子模板提供插入位置
<template>
? <div class="hello">
? ? <h1>{{ msg }}</h1>
? ? <router-view></router-view>
? </div>
</template>
3.在components目錄下新建兩個(gè)組件模板 H1.vue 和 H2.vue 兩者內(nèi)容類似瘟则，以下是H1.vue頁(yè)面內(nèi)容：
<template>
? <div class="hello">
? ? <h1>{{ msg }}</h1>
? </div>
</template>
<script>
? export default {
? ? data() {
? ? ? return {
? ? ? ? msg: 'I am H1 page,Welcome to H1'
? ? ? }
? ? }
? }
</script>
4.修改router/index.js代碼，子路由的寫法是在原有的路由配置下加入children字段枝秤。
routes: [
? ? {
? ? ? path: '/',
? ? ? name: 'HelloWorld',
? ? ? component: HelloWorld,
? ? ? children: [{path: '/h1', name: 'H1', component: H1},//子路由的<router-view>必須在HelloWorld.vue中出現(xiàn)
? ? ? ? {path: '/h2', name: 'H2', component: H2}
? ? ? ]
? ? }
? ]
七醋拧、單頁(yè)面多路由區(qū)域操作
在一個(gè)頁(yè)面里我們有2個(gè)以上 <router-view>區(qū)域，我們通過(guò)配置路由的js文件，來(lái)操作這些區(qū)域的內(nèi)容
1.App.vue文件丹壕，在 <router-view>下面新寫了兩行 <router-view>標(biāo)簽,并加入了些CSS樣式
<template>
? <div id="app">
? ? <img src="./assets/logo.png">
? ? ? <router-link :to="{name:'HelloWorld'}"><h1>H1</h1></router-link>
? ? ? <router-link :to="{name:'H1'}"><h1>H2</h1></router-link>
? ? <router-view></router-view>
? ? <router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"/>
? ? <router-view name="right" style="float:right;width:50%;background-color:yellowgreen;height:300px;"/>
? </div>
</template>
2.需要在路由里配置這三個(gè)區(qū)域庆械，配置主要是在components字段里進(jìn)行
export
default new Router({
? ? routes: [
? ? ? {
? ? ? ? path: '/',
? ? ? ? name: 'HelloWorld',
? ? ? ? components: {default: HelloWorld,
? ? ? ? ? left:H1,//顯示H1組件內(nèi)容'I am H1 page,Welcome to H1'
? ? ? ? ? right:H2//顯示H2組件內(nèi)容'I am H2 page,Welcome to H2'
? ? ? ? }
? ? ? },
? ? ? {
? ? ? ? path: '/h1',
? ? ? ? name: 'H1',
? ? ? ? components: {default: HelloWorld,
? ? ? ? ? left:H2,//顯示H2組件內(nèi)容
? ? ? ? ? right:H1//顯示H1組件內(nèi)容
? ? ? ? }
? ? ? }
? ? ]
? })
上邊的代碼我們編寫了兩個(gè)路徑，一個(gè)是默認(rèn)的‘/’菌赖，另一個(gè)是‘/Hi’.在兩個(gè)路徑下的components里面缭乘，我們對(duì)三個(gè)區(qū)域都定義了顯示內(nèi)容。最后頁(yè)面展示如下圖：
