前端動態(tài)路由配置，<路由router-基本使用>
最佳答案 問答題庫1548位專家為你答疑解惑
關(guān)于【前端動態(tài)路由配置】，，今天向乾小編給您分享一下，如果對您有所幫助別忘了關(guān)注本站哦。
內(nèi)容導(dǎo)航：1、Vue教程(路由router-基本使用)2、前端動態(tài)路由配置，1、Vue教程(路由router-基本使用)
本文開始我們來給大家介紹在Vue中非常重要的一個內(nèi)容，就是路由Router
什么是路由
后端路由：對于普通的網(wǎng)站，所有的超鏈接都是URL地址，所有的URL地址都對應(yīng)服務(wù)器上對應(yīng)的資源；
前端路由：對于單頁面應(yīng)用程序來說，主要通過URL中的hash(#號)來實現(xiàn)不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關(guān)的內(nèi)容；所以，單頁面程序中的頁面跳轉(zhuǎn)主要用hash實現(xiàn)；
在單頁面應(yīng)用程序中，這種通過hash改變來切換頁面的方式，稱作前端路由（區(qū)別于后端路由）；
Vue路由基本使用
1. 基本使用
我們先來看看 路由的 基本使用，基礎(chǔ)頁面如下
1.1 引入vue-router
我們需要引入vue-router.js文件，而且必須是在vue.js文件之后引入
1.2 創(chuàng)建組件模板
創(chuàng)建兩個組件模板對象，如下
1.3 VueRouter實例
當(dāng) 導(dǎo)入 vue-router 包之后，在 window 全局對象中，就有了一個 路由的構(gòu)造函數(shù)叫做 VueRouter,在 new 路由對象的時候，可以為 構(gòu)造函數(shù)，傳遞一個配置對象。在配置對象中我們可以來創(chuàng)建我們的路由規(guī)則
1.4 vm實例綁定
創(chuàng)建的VueRouter對象我們還需要綁定到Vue實例中才有效果
1.5 router-view
我們想要使用router路由，那么我們通過router-view標(biāo)簽來占位 我們要顯示的內(nèi)容的位置
router-view標(biāo)簽是 vue-router 提供的元素，專門用來 當(dāng)作占位符的，將來，路由規(guī)則，匹配到的組件，就會展示到這個 router-view 中去。所以： 我們可以把 router-view 認為是一個占位符。
1.6 訪問
通過上面的演示我們可以通過修改 #/后的內(nèi)容來 觸發(fā)路由中的規(guī)則，這時我們可以在頁面中添加對應(yīng)的操作按鈕來便捷觸發(fā)。
2. 重定向
上面的案例我們實現(xiàn)了路由的基本使用，但是頁面第一次打開的時候，是沒有路由規(guī)則的，這時我們可以配置一個，如下
效果
有實現(xiàn)，但是地址顯示的是“/”,我們希望地址和路由的結(jié)果是一致的，這時我們可以設(shè)置個重定向來處理。
3. router-link
我們可以用router-link標(biāo)簽來替換掉 a標(biāo)簽，這樣會更靈活些，如下
我們發(fā)現(xiàn)router-link渲染的最終的標(biāo)簽也是 a 標(biāo)簽，我們可以通過 router-link中的 tag屬性來修改 渲染的標(biāo)簽類型
4. 高亮處理
有時候我們需要給被選中的標(biāo)簽設(shè)置特殊的樣式，這時怎么辦呢？看下面的動圖。
通過演示我們發(fā)現(xiàn)，當(dāng)對應(yīng)的標(biāo)簽被選中的時候會動態(tài)給標(biāo)簽添加 class屬性:
router-link-active,那么我們就可以利用這 屬性了
實現(xiàn)了我們需要的效果，注意在VueRouter實例中有個屬性叫 linkActiveClass 可以設(shè)置我們 特定的 class 值。
效果
5. 動畫效果
?最后我們可以將前面講過的動畫運用到組件切換上。如下
最終效果如下
————————————————
2、前端動態(tài)路由配置，
0. 摘要本文介紹了單頁應(yīng)用和路由的概念，并介紹了如何用兩個技術(shù):hash模式和history模式來實現(xiàn)單頁應(yīng)用的效果。
1. 內(nèi)容什么是單頁應(yīng)用單頁應(yīng)用的特點用路由來實現(xiàn)單頁應(yīng)用hash模式history模式總結(jié)2. 什么是單頁應(yīng)用單頁應(yīng)用的英文是single page application，簡稱SPA。字面含義就是一個應(yīng)用只有一個頁面，這其實是一個很顛覆的概念，有點反常識。按我們一般意義上的理解，一個應(yīng)用肯定得有多個頁面呀。例如：一個新聞網(wǎng)站必須有主頁，列表頁，詳情頁等等。我們可能想象不到一個只有一個頁面的應(yīng)用是啥？“就一個主頁”，“就一個靜態(tài)的個人說明頁面”。
肯定不是。我們多花點時間看看歷史。
早先的網(wǎng)站都是多頁的，也就是字面意義上的多頁：主頁可能就是index.html， 列表頁就是list.html，詳情頁就是detail.html等等，這樣的好處就是開發(fā)清晰，3P（asp, jsp, php）技術(shù)就典型的代表。隨著移動設(shè)備的興起，越來越多的頁面時候通過移動設(shè)備的來訪問的，那多頁面的應(yīng)用的天然缺陷就顯示出來了：
1. 頁面跳轉(zhuǎn)時不可避免地會出現(xiàn)白屏；2. 從a頁面跳轉(zhuǎn)到b頁面時，難免有會有重復(fù)的部分（例如頁頭和頁腳一般都是通用的），而這些重復(fù)部分顯然也會造成不必要的流量浪費。這些問題在pc端都是不問題，但是在移動設(shè)備上就是大問題了，為了提升用戶的體驗，讓用戶更快的看到頁面，節(jié)約流量，程序員們發(fā)明了單頁應(yīng)用技術(shù)。
單頁應(yīng)用的主要特點就是：用一個頁面（頁面的名字就是index.html）來實現(xiàn)所有（多個頁面的）的功能。
其實，SPA、MPA這些名稱都是隨著技術(shù)發(fā)展應(yīng)用而提出來的，就像智能手機和功能手機的這對概念，在諾基亞風(fēng)靡世界時（2010年左右），它們并沒有被創(chuàng)造出來，我們討論的話題都是 多少和弦 上，但是當(dāng)出來一批更強大，更聰明的手機時，我們要做區(qū)分呀，就給諾基亞們?nèi)×嗣纸泄δ軝C。類似的概念還有服務(wù)器端渲染和客戶端渲染。
3. 單頁應(yīng)用的特點單頁應(yīng)用的特點很明顯：地址欄的變化導(dǎo)致內(nèi)容的變化，但是整個頁面并不刷新。下面是一張示意圖：
它的好處是第一次獲取到index.html這個頁面之后，再也不需要請求其他的頁面了，所有的功能操作都在這一個頁面中完成。
4. 單頁應(yīng)用的實現(xiàn)方式-路由現(xiàn)在我們拋開單頁應(yīng)用這名詞放一邊，把注意力放在如何實現(xiàn)具體功能上：地址欄中的內(nèi)容變化了，主體內(nèi)容有對應(yīng)的更新，但是整體頁面不去刷新。
就是我們說的前端路由技術(shù)。
路由是啥？可不是路由器哈。
路由就是一套規(guī)則：根據(jù)地址欄中地址來決定頁面主體上的內(nèi)容顯示。例如：當(dāng)?shù)刂肥?list時，內(nèi)容就是列表頁的內(nèi)容。當(dāng)?shù)刂肥?detail時，內(nèi)容就是詳情頁的內(nèi)容，依次類推。
實現(xiàn)路由功能有兩種方式：
Hash模式。它主要是監(jiān)聽瀏覽器的hashchange事件。history模式。它主要是調(diào)用history的pushState,replaceState方法，監(jiān)聽popstate事件。都是利用瀏覽器的相關(guān)api特性來達成目標(biāo)，嚴格來講，都不屬于js的內(nèi)容。下面我們來分別介紹這兩種技術(shù)。
5. hash模式相比較history模式，用hash模式來實現(xiàn)這個功能會比較簡單。
5.1 原理當(dāng)頁面中的地址欄從 index.html/#/detail 變成 index.html/#/list 時：
頁面并不會刷新。會觸發(fā)hashChange事件。這將是我們代碼實現(xiàn)的重點。會向瀏覽器中追加一條瀏覽記錄。也就是說通過瀏覽器的前進和后退按鈕可以切換內(nèi)容。<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { background-color: #eee; } #app { background-color: #fff; margin: 2px auto; padding: 2em; } #content{padding:0.5em}</style></head><body> <div id="app"> <nav> <a href="#/">主頁</a> <a href="#/list">列表頁</a> <a href="#/detail">詳情頁</a> </nav> <button id="btn">跳到詳情頁</button> <div id="content"> </div> </div> <script> let content = null // 頁面加載完不會觸發(fā) hashchange，這里主動觸發(fā)一次 hashchange 事件 window.addEventListener('DOMContentLoaded', function(){ content = document.querySelector("#content") onHashChange() }) // 頁面跳轉(zhuǎn)：直接設(shè)置hash值的變化 document.getElementById('btn').addEventListener('click',()=>{ location.hash='/detail'; }) // 監(jiān)聽路由變化 window.addEventListener('hashchange', onHashChange) function onHashChange(e) { console.log(e) switch (location.hash) { case "#/": content.innerHTML = "主頁的內(nèi)容" break; case "#/list": content.innerHTML = "列表頁的內(nèi)容" break; case "#/detail": content.innerHTML = "詳情頁的內(nèi)容" break; default: content.innerHTML = "404" break; } }</script></body></html>
5.4 小結(jié)hash模式在地址欄上有一個奇怪的符號 #， 讓地址看起比較奇怪。
6. history模式6.1 原理pushState方法 popstate事件
pushState方法它其實是history對象上的一個方法，其簽名是：history.pushState(state,title,[url])。它的作用是：
（1）向當(dāng)前瀏覽器會話的歷史堆棧中添加一個狀態(tài)（state），它改變歷史記錄；
（2）改變地址欄的信息；
（3）它不會刷新頁面去發(fā)請求。
你現(xiàn)在可以任意打開一個瀏覽器，然后在控制臺中，依次寫入如下三句代碼，并敲回車運行
history.pushState(null,null,'/a')history.pushState(null,null,'/b')history.pushState(null,null,'/c')
效果圖如下：
請注意如下幾點細節(jié)：
地址欄中有變化。從 baidu.com/a ->baidu.com/b ->baidu.com/c2. 頁面并沒有刷新。
瀏覽器的前進后退按鈕可以使用了。但是，千萬別點擊刷新按鈕，因為這會導(dǎo)致瀏覽器真的去請求 baidu.com/a 這個頁面，而這個頁面是不存的。
replaceState方法它的功能與pushState類似，不同的地方在于 replace(替換) 效果。
舉個例子來說：如果地址的變化是依次用pushState方法從按a,b,c的順序來修改地址欄，此時，歷史記錄就是：/a->/b->/c ，此時通過 前進后退按鈕就可以在這三條記錄中切換。但是，如果 此時使用replaceState，跳轉(zhuǎn)到/d，就會將當(dāng)前的訪問記錄替換掉，歷史記錄就是 /a->/b->/d ，最近那條記錄/c 就被/d替換了。具體效果見下圖:
當(dāng)活動歷史記錄條目更改時，將觸發(fā)popstate事件。
window.addEventListener('popstate', ()=>{console.log('popState事件',location.pathname)})
我們通過上面的代碼就可以去監(jiān)聽popstate事件了。那什么情況下會觸發(fā)這個事件呢？有如下兩類操作：
點擊瀏覽器的前進，回退按鈕調(diào)用history.back(), history.forward(), history.go()等操作歷史記錄的方法。需要注意的是調(diào)用 history.pushState() 不會觸發(fā) popstate 事件。
如果被激活的歷史記錄條目是通過對history.pushState（）的調(diào)用創(chuàng)建的，或者受到對history.replaceState（）的調(diào)用的影響，popstate事件的state屬性包含歷史條目的狀態(tài)對象的副本。
不同的瀏覽器在加載頁面時處理popstate事件的形式存在差異。頁面加載時Chrome和Safari通常會觸發(fā)(emit )popstate事件，但Firefox則不會。
6.2 目標(biāo)有了上面的理論基礎(chǔ)之后，我們來看看我們將要實現(xiàn)的目標(biāo)。具體如下
它的效果是點擊了a標(biāo)簽之后，產(chǎn)生地址欄的變化，同時主體內(nèi)容也要跟著變化。注意哈，這過程中地址欄中并沒有#號。
6.3 思路可以分成兩個部分來完成這個目標(biāo)：
劫持a標(biāo)簽的跳轉(zhuǎn)動作，在回調(diào)中:調(diào)用pushState，它會修改地址欄的地址（可以通過location.pathname來獲取）根據(jù)location.pathname的值來展示內(nèi)容監(jiān)聽popstate事件，當(dāng)瀏覽器的前進后退動作發(fā)生時，能根據(jù)當(dāng)前的pathname的內(nèi)容來展示內(nèi)容。window.addEventListener('popstate', ()=> { 根據(jù)location.pathname的變化來展示內(nèi)容})
本文關(guān)鍵詞：前端動態(tài)路由和靜態(tài)路由的區(qū)別，動態(tài)配置前端頁面，前端路由的幾種模式，前端動態(tài)路由配置命令，前端動態(tài)路由的路由規(guī)則怎么寫。這就是關(guān)于《前端動態(tài)路由配置，》的所有內(nèi)容，希望對您能有所幫助！更多的知識請繼續(xù)關(guān)注《犇涌向乾》百科知識網(wǎng)站：！
99%的人還看了
相似問題
猜你感興趣
版權(quán)申明
本文" 前端動態(tài)路由配置，<路由router-基本使用>"：http://eshow365.cn/3-85441-0.html 內(nèi)容來自互聯(lián)網(wǎng)，請自行判斷內(nèi)容的正確性。如有侵權(quán)請聯(lián)系我們，立即刪除！