vue-router路由模式详解(小结)


Posted in Javascript onAugust 26, 2019

一、路由模式解析

要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置。

如果有进行过服务器开发或者对http协议有所了解就会知道,浏览器中对页面的访问是无状态的,所以我们在切换不同的页面时都会重新进行请求。而实际使用vue和vue-router开发就会明白,在切换页面时是没有重新进行请求的,使用起来就好像页面是有状态的,这是什么原因呢。

这其实是借助了浏览器的History API来实现的,这样可以使得页面跳转而不刷新,页面的状态就被维持在浏览器中了。

vue-router中默认使用的是hash模式,也就是会出现如下的URL:vue-router路由模式详解(小结),URL中带有#号

我们可以用如下代码修改成history模式:

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
Vue.use(Router)

export default new Router({
 mode: 'history',
 routes: [
 {
  path: '/',
  component: Main
 }
 ]
})

这样子URL中的#号就被去除了。

实际上存在三种模式:

Hash: 使用URL的hash值来作为路由。支持所有浏览器。

History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式

Abstract: 支持所有javascript运行模式。如果发现没有浏览器的API,路由会自动强制进入这个模式。

二、两种模式的区别

1、hash模式

hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:

window.onhashchange = function(event){
 console.log(event.oldURL, event.newURL);
 let hash = location.hash.slice(1);
 document.body.style.color = hash;
}

上面的代码可以通过改变hash来改变页面字体颜色,虽然没什么用,但是一定程度上说明了原理。

更关键的一点是,因为hash发生变化的url都会被浏览器记录下来,从而你会发现浏览器的前进后退都可以用了,同时点击后退时,页面字体颜色也会发生变化。这样一来,尽管浏览器没有请求服务器,但是页面状态和url一一关联起来,后来人们给它起了一个霸气的名字叫前端路由,成为了单页应用标配。

我们写个简单的方法来测试一下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <div>测试一下</div>
 <script type="text/javascript">
  window.onhashchange = function(event){
   console.log(event.oldURL,event.newURL)
   let hash = location.hash.slice(1);
   document.body.style.color = hash;
  }
 </script>
</body>
</html>

vue-router路由模式详解(小结)

vue-router路由模式详解(小结)

并且通过浏览器的前进、后退页面均可以变化。

网易云音乐,百度网盘就采用了hash路由,看起来就是这个样子:

http://music.163.com/#/friend
https://pan.baidu.com/disk/home#list/vmode=list

 2、history路由

随着history api的到来,前端路由开始进化了,前面的hashchange,你只能改变#后面的url片段,而history api则给了前端完全的自由

history api可以分为两大部分:切换和修改

(1)切换历史状态

包括back、forwardgo三个方法,对应浏览器的前进,后退,跳转操作,有同学说了,(谷歌)浏览器只有前进和后退,没有跳转,嗯,在前进后退上长按鼠标,会出来所有当前窗口的历史记录,从而可以跳转(也许叫跳更合适):

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

(2)修改历史状态

包括了pushState、replaceState两个方法,这两个方法接收三个参数:stateObj,title,url

history.pushState({color:'red'}, 'red', 'red')

window.onpopstate = function(event){
 console.log(event.state)
 if(event.state && event.state.color === 'red'){
  document.body.style.color = 'red';
 }
}

history.back();

history.forward();

通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到state的里面。

通过history api,我们丢掉了丑陋的#,但是它也有个毛病:

不怕前进,不怕后退,就怕刷新,f5,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的。

在hash模式下,前端路由修改的是#中的信息,而浏览器请求时是不带它玩的,所以没有问题。但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。

(3)popstate实现history路由拦截,监听页面返回事件

当活动历史记录条目更改时,将触发popstate事件。

1、如果被激活的历史记录条目是通过对 history.pushState() 的调用创建的,或者受到对 history.replaceState() 的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本。

2、需要注意的是调用 history.pushState() 或 history.replaceState() 用来在浏览历史中添加或修改记录,不会触发popstate事件;

只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在Javascript代码中调用history.back())

我们测试一下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <div>测试一下</div>
 <script type="text/javascript">
  if (window.history && window.history.pushState) {
   window.onpopstate = function(event) {
    console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
    //window.history.go(1)
    //window.history.back()
   };
   
   //window.addEventListener("popstate", function(e) {
   // window.location = 'http://www.baidu.com';
   //}, false);
   
   !function() {
    var state = {
     title: "title",
     url: "#"
    };
    window.history.pushState(state, "title", "#");
   }();
  }
 </script>
</body>
</html>

刷新时不打印,刷新多次,再后退,每次都有,直到为null

vue-router路由模式详解(小结)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
JS生成随机打乱数组的方法示例
Dec 23 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
vue+moment实现倒计时效果
Aug 26 #Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 #Javascript
Moment.js实现多个同时倒计时
Aug 26 #Javascript
vue获取验证码倒计时组件
Aug 26 #Javascript
seajs和requirejs模块化简单案例分析
Aug 26 #Javascript
JavaScript实现身份证验证代码实例
Aug 26 #Javascript
基于vue、react实现倒计时效果
Aug 26 #Javascript
You might like
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
使用Python对MySQL数据操作
2017/04/06 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
python实现PCA降维的示例详解
2020/02/24 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
食品业务员岗位职责
2014/03/18 职场文书
初中生评语大全
2014/04/24 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
荆州古城导游词
2015/02/06 职场文书
结婚老公保证书
2015/02/26 职场文书
2015入党个人自传范文
2015/06/26 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
微信小程序实现轮播图指示器
2022/06/25 Javascript