return view前端怎么获取_Web 前端路由原理解析和功能实现
↑ 点击上面 “时代Java”关注我们,
关注新技术,学习新知识!
什么是前端路由?
路由的概念来源于服务端,在服务端中路由描述的是 URL 与处理函数之间的映射关系。
在 Web 前端单页应用 SPA(Single Page Application)中,路由描述的是 URL 与 UI 之间的映射关系,这种映射是单向的,即 URL 变化引起 UI 更新(无需刷新页面)。
如何实现前端路由?
要实现前端路由,需要解决两个核心问题:
如何改变 URL 却不引起页面刷新?
如何检测 URL 变化了?
下面分别使用 hash 和 history 两种实现方式回答上面的两个核心问题。
hash 实现
hash 是 URL 中 hash (
#
) 及后面的那部分,常用作锚点在页面内进行导航,改变 URL 中的 hash 部分不会引起页面刷新通过 hashchange 事件监听 URL 的变化,改变 URL 的方式只有这几种:通过浏览器前进后退改变 URL、通过
标签改变 URL、通过wind
ow.location改变URL,这几种情况改变 URL 都会触发 hashchange 事件
history 实现
history 提供了 pushState 和 replaceState 两个方法,这两个方法改变 URL 的 path 部分不会引起页面刷新
history 提供类似 hashchange 事件的 popstate 事件,但 popstate 事件有些不同:通过浏览器前进后退改变 URL 时会触发 popstate 事件,通过
pushState/replaceState
或标签改变 URL 不会触发 popstate 事件。好在我们可以拦截 pushState/r
eplaceState的调用和标签的点击事件来检测 URL 变化,所以监听 URL 变化可以实现,只是没有 hashchange 那么方便。
原生JS版前端路由实现
基于上节讨论的两种实现方式,分别实现 hash 版本和 history 版本的路由,示例使用原生 HTML/JS 实现,不依赖任何框架。
基于 hash 实现
运行效果:
HTML 部分:
- ref="">
- home
- about
ref="">
JavaScript 部分:
// 页面加载完不会触发 hashchange,这里主动触发一次 hashchange 事件window.addEventListener('DOMContentLoaded', onLoad)// 监听路由变化window.addEventListener('hashchange', onHashChange)// 路由视图var routerView = nullfunction onLoad () { routerView = document.querySelector('#routeView') onHashChange()}// 路由变化时,根据路由渲染对应 UIfunction onHashChange () { switch (location.hash) { case '#/home': routerView.innerHTML = 'Home' return case '#/about': routerView.innerHTML = 'About' return default: return }
}
基于 history 实现
运行效果:
HTML 部分:
- home
- about
JavaScript 部分:
// 页面加载完不会触发 hashchange,这里主动触发一次 hashchange 事件window.addEventListener('DOMContentLoaded', onLoad)// 监听路由变化window.addEventListener('popstate', onPopState)// 路由视图var routerView = nullfunction onLoad () { routerView = document.querySelector('#routeView') onPopState() href=""> // 拦截 标签点击事件默认行为, 点击时使用 pushState 修改 URL并更新手动 UI,从而实现点击链接更新 URL 和 UI 的效果。 var linkList = document.querySelectorAll('a[href]') linkList.forEach(el => el.addEventListener('click', function (e) { e.preventDefault() history.pushState(null, '', el.getAttribute('href')) onPopState() }))}// 路由变化时,根据路由渲染对应 UIfunction onPopState () { switch (location.pathname) { case '/home': routerView.innerHTML = 'Home' return case '/about': routerView.innerHTML = 'About' return default: return }
}
React 版前端路由实现
基于 hash 实现
运行效果:
使用方式和 react-router 类似:
homeabout
Home
} />
About
} />
BrowserRouter 实现
export default class BrowserRouter extends React.Component { state = { currentPath: utils.extractHashPath(window.location.href) }; onHashChange = e => { const currentPath = utils.extractHashPath(e.newURL); console.log("onHashChange:", currentPath); this.setState({ currentPath }); }; componentDidMount() { window.addEventListener("hashchange", this.onHashChange); } componentWillUnmount() { window.removeEventListener("hashchange", this.onHashChange); } render() { return ( {this.props.children} ); }}
Route 实现
export default ({ path, render }) => ( {({currentPath}) => currentPath === path && render()});
Link 实现
export default ({ to, ...props }) => ;
基于 history 实现
运行效果:
使用方式和 react-router 类似:
homeabout
Home
} />
About
} />
HistoryRouter 实现
export default class HistoryRouter extends React.Component { state = { currentPath: utils.extractUrlPath(window.location.href) }; onPopState = e => { const currentPath = utils.extractUrlPath(window.location.href); console.log("onPopState:", currentPath); this.setState({ currentPath }); }; componentDidMount() { window.addEventListener("popstate", this.onPopState); } componentWillUnmount() { window.removeEventListener("popstate", this.onPopState); } render() { return ( {this.props.children} ); }}
Route 实现
export default ({ path, render }) => ( {({currentPath}) => currentPath === path && render()});
Link 实现
export default ({ to, ...props }) => ( {({ onPopState }) => ( href="" {...props} onClick={e => { e.preventDefault(); window.history.pushState(null, "", to); onPopState(); }} /> )});
Vue 版本前端路由实现
基于 hash 实现
运行效果:
使用方式和 vue-router 类似(vue-router 通过插件机制注入路由,但是这样隐藏了实现细节,为了保持代码直观,这里没有使用 Vue 插件封装):
homeabout
const routes = {
'/home': {
template: '
Home
'
},
'/about': {
template: '
About
'
}
}
const app = new Vue({
el: '.vue.hash',
components: {
'router-view': RouterView,
'router-link': RouterLink
},
beforeCreate () {
this.$routes = routes
}
})
router-view 实现:
router-link 实现:
基于 history 实现
运行效果:
使用方式和 vue-router 类似:
homeabout
const routes = {
'/home': {
template: '
Home
'
},
'/about': {
template: '
About
'
}
}
const app = new Vue({
el: '.vue.history',
components: {
'router-view': RouterView,
'router-link': RouterLink
},
created () {
this.$routes = routes
this.boundPopState = this.onPopState.bind(this)
},
beforeMount () {
window.addEventListener('popstate', this.boundPopState)
},
beforeDestroy () {
window.removeEventListener('popstate', this.boundPopState)
},
methods: {
onPopState (...args) {
this.$emit('popstate', ...args)
}
}
})
router-view 实现:
router-link 实现:
小结
前端路由的核心实现原理很简单,但是结合具体框架后,框架增加了很多特性,如动态路由、路由参数、路由动画等等,这些导致路由实现变的复杂。本文去粗取精只针对前端路由最核心部分的实现进行分析,并基于 hash 和 history 两种模式,分别提供原生JS/React/Vue 三种实现,共计六个实现版本供参考,希望对你有所帮助。
return view前端怎么获取_Web 前端路由原理解析和功能实现相关推荐
- HTML5期末大作业:橙色精美零食网站设计——橙色精美零食(3页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码
HTML5期末大作业:橙色精美零食网站设计--橙色精美零食(3页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码 常见网页设计作业题材有 个人. 美食. 公司. 学 ...
- HTML+CSS大作业——电影动漫言叶之庭(4页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码
HTML5期末大作业:电影网站设计--电影动漫言叶之庭(4页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码 常见网页设计作业题材有 个人. 美食. 公司. 学校. ...
- HTML5期末大作业:商城网站设计——蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码
HTML5期末大作业:商城网站设计--蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码 常见网页设计作业题材 ...
- eclipese web前端开发教学_Web前端零基础好学吗?新手该怎么学?
众所周知,Web前端是现在很火的行业,找工作的人也多,招聘的公司也多,工作环境也好,各招聘公司给的工资也高,这么火热的行业还是供不应求. Web前端市场的供不应求直接导致前端工程师的待遇提高,另外一方 ...
- return view前端怎么获取_前端判断上传图片格式
省流量,先说结论:前端无法通过现有API获取文件真实格式,必须拿到文件的二进制内容,然后和文件规范定义比对,才能得到真实的文件格式. 背景 前端经常会有图片上传的业务需求,例如下图的的需求,要求上传的 ...
- HTML5期末大作业:酒店主题网站设计——酒店阳光温馨网站(5页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码...
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
- 令人惊叹的前端路由原理解析和实现方式
在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂.想要搞懂路由内部实现还是有些困难的,但是如果只想了解路由实现基本原理还 ...
- reactrouter监听路由变化_一篇文章搞懂前端路由原理解析和实现方式
在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂. 想要搞懂路由内部实现还是有些困难的,但是如果只想了解路由实现基本原理 ...
- react router 级联路由_前端路由原理解析和实现
作者:@whinc链接:https://github.com/whinc/blog/issues/13 在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大 ...
最新文章
- AWS Amplify Console:赋予应用程序快速部署的能力
- php语言的四种循环控制语句,PHP循环控制语句
- tesseract4.0.0 中文语言包_一份TensorFlow2.0中文教程
- 如何用python创建文件_如何使用Python创建新的文本文件
- 编写yara规则,检测恶意软件(自定义yara规则)
- es6 获取对象的所有值_前端开发必备 - ES6 新特性之 Set和Map数据结构
- idea git配置好之后无法看到已修改的文件解决方法
- SSM开发环境的搭建(方式二)
- Autorun 病毒清除工具
- 2022年江西省研究生数学建模竞赛冰壶运动求解全过程文档及程序
- 纯Java代码实现 企业微信钉钉 机器人群+告警
- 数据库mysql基本查询语句_数据库mysql基础查询语句实录
- android启用hdcp_如何在Android的Google键盘中启用单手模式
- nginx正向代理——实现上网功能
- 国标MPEG-PS实时流播放器开发(附例子)
- python-pygame实现飞机大战-5-屏幕渲染绘制分数、生命数、超级炸弹数以及暂停功能
- 优化Oracle数据库查询10个方法
- 逻辑门电路 逻辑运算
- 诗词大全给力版_热卖20万套的网红古诗词日历来了!全新开启2021诗意生活
- Excel 集計機能