前端的路由控制

zollero 发布于2019-08-19 18:01 / 611人阅读

摘要：最近很流行，其实所谓就是服务端提供数据，前端进行渲染改变容器里的内容，新手初探。这里就涉及到路由控制，目前路由控制有两种路由控制的路由也就是类似和目前实现的路由，总会在后面加上这些，个人觉得不是很美观，当然兼容性没得说，也是支持的。

最近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)
})

就是这么简单的一个例子。我也是刚摸清楚，过段时间继续更新。

私有云 idc机房托管路由控制前端路由 js前端路由 php 控制器路由

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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