前端的路由控制

zollero 發布于2019-08-19 18:01 / 761人閱讀

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

最近spa很流行，其實所謂spa就是服務端提供數據，前端js進行渲染改變容器里的內容，新手初探。這里就涉及到路由控制，目前路由控制有兩種：

路由控制 1. hash的路由

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

2. history的路由

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

路由實現

先看個簡單的演示吧

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

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
  }
})
//觸發回退前進事件
window.addEventListener("popstate",function(e){
  document.querySelector("#app-container").innerHTML=location.pathname.slice(1)
})

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

GPU云服務器云服務器路由控制前端路由 js前端路由 php 控制器路由

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79097.html

前端真的能做到徹底權限控制嗎？

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

luck 2019-08-21 18:35 評論0 收藏0
談前端權限

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

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

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

cpupro 2019-05-22 19:26 評論0 收藏0
怎么理解前端router? 當然是自己實現一個啦!

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

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

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

不知名網友 2019-08-20 16:45 評論0 收藏0