Vue Router 是 Vue.js 官方的路由管理器。在早期的时候html模板存在服务端,然后根据浏览器输入不同的路径,服务端会根据不同的路径渲染不同的模板出来,这样的痛点就是用户每次操作的时候都要重新刷新页面,比如说很久之前的论坛,操作一下就要跳一下,交互体验很是不好,紧接着出现了Ajax异步加载,但多页面的跳转还是有些不尽人意,所以便有了spa应用,也就是前端路由,vue-route就是一个比较火的基于前端路由的原理实现的一个插件
hash模式主要是根据监听浏览器hash值的变化,做出对应的 动作来实现的,hash的值就是url后边#后边的那一块,用过vue的想必比较熟悉了
好, 下边我们打开控制台
//在控制台输入这句话,定义一下hashchange的回调事件
window.onhashchange=()=>{
console.log(1)
}
定义好这个事件之后当我们浏览器的hash值发生变化的时候控制台就会打印一个1
我们实验一下
//假设我们定义了一个路径叫route
location.hash='/route'
讲到这里那剩下的就很简单了,hash模式的前端路由我们只需要在hash发生改变的时候给页面的根节点上渲染出我们想要的html就可以了
首先假设我们有个div是根节点,然后他有个id叫app,我们写一个路由类让他监听hash
// 获取这个app
const _EL = document.querySelector('#app');
class HashRouter {
constructor(routeList) {
this.routeList = routeList;
window.addEventListener('hashchange', e => {
});
}
}
然后发生改变的时候需要重新渲染页面
//渲染方法
render(routePath) {
//获取组件
let { component } = this.list.find(el => el.path == routePath);
if ( !component )return
//渲染
_EL.innerText = component;
}
然后我们在发生改变的时候获取到当前的hash并调用渲染函数
// 这个和onhashchange 是一样的,感觉这样写会优雅一点
window.addEventListener('hashchange', e => {
this.reSetRender();
});
// 渲染当前组件
reSetRender(){
let path = location.hash.slice(1)||'/'
this.render(path)
}
最后实现一下hash模式路由的常用api
push(routePath) {
location.hash = routePath;
}
replace(path) {
let href = window.location.href;
let url = href.split('#')[0];
location.replace(`${url}#${path}`);
}
go(n) {
history.go(n);
}
到此hash模式的路由就算是简单的实现完毕了
//假装这里有一个路由数组配置
const routeList = [XXXXXX.....]
const $router = new HashRouter(routeList);
History对象是浏览器历史栈的一个接口,他里边都是和浏览器的历史栈操作有关的api
在window对象上边有一个onpopstate事件,这个事件会在历史栈发生改变的时候触发,这个事件在微信小程序的H5 里边有时候格外的有用,在微信小程序不能刷新H5,然后左上角的回退按钮,可以用这个事件进行一些操作
注意 这个onpopstate事件并不会在你手动更改history的时候触发,他只会在浏览器本身做出动作的时候才会被触发,比如pushState(),这个方法浏览器会做出反应,但是并不会触发该事件。
history模式路由代码实现和上边hash实现大同小异,不一样的地方就是在pushState和replaceState方法中需要手动调用一下渲染函数,具体代码如下
// 构造函数里边监听popstate事件
window.addEventListener('popstate', e \=> {
this.handler();
});
// api 实现
push(path) {
history.pushState(null, null, path);
this.reSetRender();
}
replace(path) {
history.replaceState(null, null, path);
this.reSetRender();
}
go(num) {
window.history.go(num);
}
history模式访问的是真实的路由地址,如果没有配置的话刷新的时候会报404
so 一个简单的路由实现完毕
来自:https://segmentfault.com/a/1190000021546995
Vue中的路由根据用户在网页中的点击,将其引导到对应的页面。安装vue-router,路由使用包括:嵌套路由、动态路由、编程式路由、路由重定向
关于 React Router v5 有一个小插曲,其实开发团队原本只是计划发布 React Router 4.4 版本,但由于错误地使用了托字符 (^) —— 将依赖错误地写成 react-router: ^4.3.1,导致报错。最后团队决定撤销 4.4 版本,直接改为发布 React Router v5。
在我们平时练习或者实际项目中也好,我们常常遇到这么一个需求:移动端中的导航并不是在顶部也不是在底部,而是在最底部且是固定的,当我们点击该导航项时会切换到对应的组件
作为 React 全家桶的一员,如果我们想要开发一个 React 应用,那么 react-router 基本上是我们绕不过去的基础。基于此,对它的了解和使用也是必不可少的一步,本文将重点介绍实际应用中常用的一些 API 以及实践过程中遇到的一些问题
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!