快活林资源网

vue-router路由模式详解(小结)
网络编程 2024/12/27 佚名
3 1
快活林资源网 Design By www.csstdc.com

一、路由模式解析

要讲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、forward、go三个方法，对应浏览器的前进，后退，跳转操作，有同学说了，(谷歌)浏览器只有前进和后退，没有跳转，嗯，在前进后退上长按鼠标，会出来所有当前窗口的历史记录，从而可以跳转(也许叫跳更合适)：

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路由模式详解(小结)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

快活林资源网 Design By www.csstdc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
快活林资源网 Design By www.csstdc.com
www.csstdc.com 快活林资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
快活林资源网 Design By www.csstdc.com