vue-router路由與頁(yè)面間導(dǎo)航的示例分析

小編給大家分享一下vue-router路由與頁(yè)面間導(dǎo)航的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

10多年專(zhuān)注建站、設(shè)計(jì)、互聯(lián)網(wǎng)產(chǎn)品按需網(wǎng)站策劃服務(wù)，業(yè)務(wù)涵蓋高端網(wǎng)站設(shè)計(jì)、商城開(kāi)發(fā)、小程序設(shè)計(jì)、軟件系統(tǒng)開(kāi)發(fā)、成都App制作等。憑借多年豐富的經(jīng)驗(yàn)，我們會(huì)仔細(xì)了解每個(gè)客戶的需求而做出多方面的分析、設(shè)計(jì)、整合，為客戶設(shè)計(jì)出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案，創(chuàng)新互聯(lián)建站更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)，以推動(dòng)各中小企業(yè)全面信息數(shù)字化，并利用創(chuàng)新技術(shù)幫助各行業(yè)提升企業(yè)形象和運(yùn)營(yí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)用中，則是路徑之間的切換，也就是組件的切換。

vue-router

我們知道路由定義了一系列訪問(wèn)的地址規(guī)則，路由引擎根據(jù)這些規(guī)則匹配找到對(duì)應(yīng)的處理頁(yè)面，然后將請(qǐng)求轉(zhuǎn)發(fā)給頁(yè)進(jìn)行處理?？梢哉f(shuō)所有的后端開(kāi)發(fā)都是這樣做的，而前端路由是不存在"請(qǐng)求"一說(shuō)的。

前端路由是找到地址匹配的一個(gè)組件或者對(duì)象將其渲染出來(lái)。改變?yōu)g覽器地址不向服務(wù)器發(fā)送請(qǐng)求有兩種方法，

一是在地址中加入#以欺騙瀏覽器，地址的改變是由于正在進(jìn)行頁(yè)內(nèi)導(dǎo)航；二是使用HTML5的window.history功能，使用URL的hash來(lái)模擬一個(gè)完整的URL。

vue-router是官方提供的一套專(zhuān)用的路由工具庫(kù)，是vue的一個(gè)插件，我們需要在全局引用中通過(guò)vue.use()將它引入到vue實(shí)例中，

使用vue-cli創(chuàng)建項(xiàng)目后（init初始化時(shí)vue-router確認(rèn)y）

我們先來(lái)看一下項(xiàng)目src的結(jié)構(gòu)，通過(guò)cmd進(jìn)入到項(xiàng)目src目錄下，執(zhí)行 tree -f > list.txt 生成結(jié)構(gòu)樹(shù)（保存在list.txt中）：

結(jié)構(gòu)如下：

src
├─assets // 靜態(tài)資源
│ └─image // 圖片
│  
├─components // 組件 
│ └─HelloWorld
│  HelloWorld.vue
│  
└─router // 路由配置
│ └─index.js
│ 
│ App.vue // 默認(rèn)程序入口
│ main.js
│

1、打開(kāi)main.js:

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router, 
 render: h => h(App)　
})

第10行將配置的路由綁定到vue實(shí)例上，第11行在vue實(shí)例中使用render方法來(lái)繪制這個(gè)vue組件(App)完成初始化

Render是vue2新增的具有特色的方法，為了得到更好的運(yùn)行速度，vue2也采用的類(lèi)似react的Virtual Dom（虛擬Dom）

 2、然后我們?cè)赾omponents中注冊(cè)幾個(gè)組件

3、打開(kāi)router/index.js配置路由

import Vue from 'vue'
import Router from 'vue-router'
import Singer from '@/components/rank/rank'
Vue.use(Router) // 注冊(cè)router
export default new Router({
 routes: [
 {
 path: '/',
 name: 'Hello',
 component: MHeader // 路由中指定組件
 },
 {
 path: '/rank',
 name: 'rank',
 component: Rank
 }
 ]
})

路由的模式

關(guān)鍵詞："mode"，"history模式"，"hash模式"，"Abstract模式"

我們可以在創(chuàng)建的Router中使用模式，如參數(shù)mode:history的參數(shù)，這個(gè)值意思是使用history模式，這種模式充分利用了history.pushState API來(lái)完成URL的跳轉(zhuǎn)而無(wú)需重新加載頁(yè)面 ，

如果不使用history模式，當(dāng)訪問(wèn)rank的時(shí)候路由就會(huì)變成：

http://localhost/#rank

反之為：

http://localhost/rank

這就是history模式和hash模式的區(qū)別，除此之外還有一種abstract模式

• Hash：使用URL hash值作為路由，

• History：依賴(lài)HTML5 History API和服務(wù)器配置

• Abstract：支持所有JavaScript運(yùn)行環(huán)境，如node服務(wù)器端。如果發(fā)現(xiàn)沒(méi)有瀏覽器的API，路由就會(huì)強(qiáng)制進(jìn)入這個(gè)模式

路由與導(dǎo)航

關(guān)鍵詞："router-link" , "router-view"

vue-router提供兩個(gè)指令標(biāo)簽組件來(lái)處理這個(gè)導(dǎo)航與自動(dòng)渲染邏輯：

• <router-view>——渲染路徑匹配到的組件視圖，

• <router-link>——支持用戶在具有路由功能的應(yīng)用中導(dǎo)航

我們使用整兩個(gè)標(biāo)簽組件來(lái)完成一個(gè)簡(jiǎn)單的頁(yè)面布局：

在路由使用時(shí)要明確一個(gè)原則就是：不直接引用路由定義，（即不要在router-link直接通過(guò) to='conpontents/rank/rank' 來(lái)導(dǎo)向路由），當(dāng)顯式引用路由定義的URL一旦發(fā)生變化，所有引用的地方都要修改。

在router-link通過(guò)名稱(chēng)引用路由：向to屬性傳入一個(gè)對(duì)象顯式的聲明路由的名稱(chēng)：

<router-link :to="{ name:'rank' }">

這里留意使用v-bind綁定（簡(jiǎn)寫(xiě)：），因?yàn)檫@里需要向router-link傳遞的是一個(gè)對(duì)象{ name:'rank' }而不是一個(gè)字符串

動(dòng)態(tài)路由

關(guān)鍵詞："動(dòng)態(tài)路由參數(shù)"，"params"，"$router.params"

vue-router將參數(shù)融入到路由的路徑定義之內(nèi)成為路由的一部分，我們稱(chēng)這種參數(shù)為"動(dòng)態(tài)路徑參數(shù)"；

使用非常簡(jiǎn)單，在參數(shù)名之前加上":"，然后將參數(shù)寫(xiě)在路由定義的path內(nèi)，

 routers：[{
 name:'BookDetails',
 path:'books/:id',
 component:BookDetails 
 }]

1、這樣定義之后，vue-router就會(huì)自動(dòng)匹配/books/1、/books/2、...、/books/n 形式的路由模式，因?yàn)檫@樣定義的路由的數(shù)量是不確定的，所以也稱(chēng)為"動(dòng)態(tài)路由"。

2、在<router-link>中我們就可以加入一個(gè)params的屬性來(lái)指定具體的參數(shù)值：

 <router-link :to="{ name:'BookDetails'，params:{ id:1 } }">
  //...
 </router-link>

3、當(dāng)我們導(dǎo)航進(jìn)入圖書(shū)詳情頁(yè)之后，我們可能需要獲取屬性指定的參數(shù)值（即重新將:id參數(shù)讀取出來(lái)），我們可以通過(guò)$router.params來(lái)完成：

 export default {
 created () {
  const bookID = this.$router.params.id
 }
 }

嵌套式路由

關(guān)鍵詞："children"，

我們利用下面的場(chǎng)景，首頁(yè)/home/讀書(shū)詳情 頁(yè)面，讀書(shū)詳情也我們不需要底部的導(dǎo)航區(qū)域，但是我們使用之前的路由定義，所有的頁(yè)面都應(yīng)該具有想用的底部導(dǎo)航條，按前面的路由結(jié)構(gòu)是不可以導(dǎo)航到圖書(shū)詳情頁(yè)的，如下：

所以我們就需要另一種定義路由的方式，對(duì)前面的路由進(jìn)行調(diào)整，

嵌套式路由又叫做子路由，要將路由顯示到子視圖中就要相應(yīng)的子路由與之對(duì)應(yīng)，我們只需要在路由定義中使用children數(shù)組屬性就可以定義子路由了：

routers:[
 { 
  name:'Main',
  path:'/',
  component:Main,
  children:[
  { name:'Home',path:'home',component:Home }
  { name:'Me',path:'me',component:Me }
  ] 
 },
 { name:'BookDetail',path:'/books/:id',component:BookDetail } 
]

需要注意的是以"/"開(kāi)頭的嵌套路徑會(huì)被當(dāng)做根路徑，所以不要在子路由上加上"/"；

重定向路由與別名

關(guān)鍵詞："redirect"，"alias"

重定向也是通過(guò) routes 配置來(lái)完成，下面例子是從 /a 重定向到 /b：

 routes: [
 { path: '/a', redirect: '/b' }
 ]
// 重定向的目標(biāo)也可以是一個(gè)命名的路由
 routes: [
 { path: '/a', redirect: { name: 'foo' }}
 ]

另外我們需要區(qū)別重定向和別名，『重定向』的意思是，當(dāng)用戶訪問(wèn) /a時(shí)，URL 將會(huì)被替換成 /b，然后匹配路由為 /b，那么『別名』又是什么呢？

/a 的別名是 /b，意味著，當(dāng)用戶訪問(wèn) /b 時(shí)，URL 會(huì)保持為 /b，但是路由匹配則為 /a，就像用戶訪問(wèn) /a 一樣：

利用alias給路由設(shè)置別名

 routes: [
 { path: '/a', component: A, alias: '/b' }
 ]

以上是“vue-router路由與頁(yè)面間導(dǎo)航的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：vue-router路由與頁(yè)面間導(dǎo)航的示例分析
文章轉(zhuǎn)載：http://bm7419.com/article46/ijpseg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、自適應(yīng)網(wǎng)站、域名注冊(cè)、Google、云服務(wù)器、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)