前端的路由控制

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

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

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

路由控制 1. hash的路由

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

2. history的路由

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

路由實現(xiàn)

先看個簡單的演示吧

可以看到內(nèi)容是隨著路由的改變而改變的，這里沒有用ajax，就是簡單的替換內(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ā)回退前進事件
window.addEventListener("popstate",function(e){
  document.querySelector("#app-container").innerHTML=location.pathname.slice(1)
})

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79097.html

相關(guān)文章

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

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

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

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

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

摘要：而路由則是使用了中新增的事件和事件?？偨Y(jié)這一章主要是介紹了如何使用在中構(gòu)建我們的前端路由。系列目錄地址一、基礎(chǔ)知識概覽第一章 - 一些基礎(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 評論0 收藏0
怎么理解前端router? 當然是自己實現(xiàn)一個啦!

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

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

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

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