前端的路由控制

zollero 發(fā)布于2019-08-19 18:01 / 814人閱讀

摘要：最近很流行，其實(shí)所謂就是服務(wù)端提供數(shù)據(jù)，前端進(jìn)行渲染改變?nèi)萜骼锏膬?nèi)容，新手初探。這里就涉及到路由控制，目前路由控制有兩種路由控制的路由也就是類似和目前實(shí)現(xiàn)的路由，總會(huì)在后面加上這些，個(gè)人覺得不是很美觀，當(dāng)然兼容性沒得說，也是支持的。

最近spa很流行，其實(shí)所謂spa就是服務(wù)端提供數(shù)據(jù)，前端js進(jìn)行渲染改變?nèi)萜骼锏膬?nèi)容，新手初探。這里就涉及到路由控制，目前路由控制有兩種：

路由控制 1. hash的路由

也就是類似angular和vue目前實(shí)現(xiàn)的路由，總會(huì)在path后面加上#!這些，個(gè)人覺得不是很美觀，當(dāng)然兼容性沒得說，ie6也是支持的。

2. history的路由

history是html5新添加的api，這邊不多說了，反正網(wǎng)上一大堆介紹，history的路由優(yōu)勢(shì)在于美觀（個(gè)人感覺），缺點(diǎn)也就是兼容問題了,如圖：

路由實(shí)現(xiàn)

先看個(gè)簡(jiǎn)單的演示吧

可以看到內(nèi)容是隨著路由的改變而改變的，這里沒有用ajax，就是簡(jiǎn)單的替換內(nèi)容，不過意思是一樣的。那么代碼是怎么樣的呢

var els=document.querySelectorAll(".el");
//添加事件
window.addEventListener("click",function(e){
  if(e.target.className==="el"){
    console.log(history.state)
    if(location.pathname.slice("1")===e.target.innerText){
      history.replaceState(null,"el",e.target.innerText)
    }else {
      history.pushState(null,"el",e.target.innerText)
    }

    document.querySelector("#app-container").innerHTML=e.target.innerText
  }
})
//觸發(fā)回退前進(jìn)事件
window.addEventListener("popstate",function(e){
  document.querySelector("#app-container").innerHTML=location.pathname.slice(1)
})

就是這么簡(jiǎn)單的一個(gè)例子。我也是剛摸清楚，過段時(shí)間繼續(xù)更新。

云服務(wù)器 GPU云服務(wù)器路由控制前端路由 js前端路由 php 控制器路由

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/79097.html

相關(guān)文章

前端真的能做到徹底權(quán)限控制嗎？

摘要：有一天突然想到一個(gè)問題，端的權(quán)限控制真的能控制權(quán)限嗎僅僅靠前端，能不能做到真正的權(quán)限控制如果需要后臺(tái)配合，應(yīng)該如何配合可能這是一個(gè)老生常談的問題，但還是想整理下，有誤的地方望大家指出。有一天突然想到一個(gè)問題，web端的權(quán)限控制：1.真的能控制權(quán)限嗎？2.僅僅靠前端，能不能做到真正的權(quán)限控制？3.如果需要后臺(tái)配合，應(yīng)該如何配合？可能這是一個(gè)老生常談的問題，但還是想整理下，有誤的地方望大...

luck 2019-08-21 18:35 評(píng)論0 收藏0
談前端權(quán)限

摘要：自從有了前后端分離，前端的工作內(nèi)容就變得越發(fā)多起來，其中有一項(xiàng)就是權(quán)限控制，下面就談一談前端權(quán)限。所以從某種意義上來說，就算前端的權(quán)限控制做得再嚴(yán)密，可能作用也是有限的。 showImg(https://segmentfault.com/img/bVbpwf4); 自從有了前后端分離，前端的工作內(nèi)容就變得越發(fā)多起來，其中有一項(xiàng)就是權(quán)限控制，下面就談一談前端權(quán)限。 WHAT首先我們要理清...

alaege 2019-08-26 13:33 評(píng)論0 收藏0
【Vue.js 牛刀小試】：第十二章 - 使用 Vue Router 實(shí)現(xiàn) Vue 中的前端路由控制

摘要：而路由則是使用了中新增的事件和事件?？偨Y(jié)這一章主要是介紹了如何使用在中構(gòu)建我們的前端路由。系列目錄地址一、基礎(chǔ)知識(shí)概覽第一章 - 一些基礎(chǔ)概念（posted at 2018-10-31）第二章 - 常見的指令的使用（posted at 2018-11-01）第三章 - 事件修飾符的使用（posted at 2018-11-02）第四章 - 頁面元素樣式的設(shè)定（posted a...

cpupro 2019-05-22 19:26 評(píng)論0 收藏0
怎么理解前端router? 當(dāng)然是自己實(shí)現(xiàn)一個(gè)啦!

摘要：流行的今天不少同學(xué)會(huì)把前端路由跟后端路由弄混莫名其妙的怎么頁面啦之類奇怪的問題其實(shí)這就是沒弄清楚前端路由和后端路由的原因當(dāng)然你用當(dāng)我沒說本文所有前端路由都是的情況下不存在后端渲染好變量的情況原理首先我們看看前后端路由在瀏覽器中是怎么工作的上 spa流行的今天不少同學(xué)會(huì)把前端路由跟后端路由弄混, 莫名其妙的怎么頁面404啦之類奇怪的問題, 其實(shí)這就是沒弄清楚前端路由和后端路由的原因(當(dāng)然...

fsmStudy 2019-08-21 18:32 評(píng)論0 收藏0
手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)

摘要：我們將登錄按鈕上綁上事件，點(diǎn)擊登錄之后向服務(wù)端提交賬號(hào)和密碼進(jìn)行驗(yàn)證。所以前端和后端權(quán)限的劃分是不太一致。側(cè)邊欄最后一個(gè)涉及到權(quán)限的地方就是側(cè)邊欄，不過在前完整項(xiàng)目地址：vue-element-admin 系列文章：手摸手，帶你用vue擼后臺(tái) 系列一（基礎(chǔ)篇）手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇) 手摸手，帶你用vue擼后臺(tái) 系列三 (實(shí)戰(zhàn)篇) 手摸手，帶你用vu...

不知名網(wǎng)友 2019-08-20 16:45 評(píng)論0 收藏0