vue-router的模式,vue-router的两种模式

　　这个路由的概念最早出现在后端。下面文章主要介绍vue前端路由和vue-router的相关信息。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。

前言

　　这个路由的概念最早出现在后端，后来前端和后端分开了。直到今天的单页应用，路由一直在变化。本文总结了vue-router中与路由变化和路由模式差异相关的知识点。

1、什么是前端路由

（1）后端路由阶段

　　所有早期的页面都是由服务器端的html页面呈现的，服务器端直接将呈现的html页面返回给客户端进行显示。一个页面对应一个URL。首先服务器向服务器请求对应的URL，服务器根据这个URL匹配对应的控制器，最后生成html页面返回给客户端。这种方式有利于SEO优化，但是这种页面html和数据逻辑混杂在一起，给开发者的开发和维护带来困难。

（2）前后端分离路由阶段

　　随着ajax的出现，前端和后端分离了。后端只负责逻辑处理和返回数据，前端只负责通过Ajax将数据渲染到页面。

（3）单页面应用阶段

　　实际上，SPA的主要特点是在前端和后端分离的基础上增加了一层前端路由，即前端维护一套路由规则。

2、vue-router 提供了 hash 和 history 两种路由模式

　　vue-router的功能是更新页面视图，而无需通过更改URL来重新请求页面。简单来说，虽然地址栏的地址变了，但并不是全新的页面，只是修改了之前页面的部分内容。要解决上述问题，需要知道浏览器窗口的history对象和location对象的hash属性(详见history对象的详细说明)。这两个对象有页面路径跳转的功能，但是页面不刷新。

（1）hash模式

　　对应于location对象的hash属性，vue-router默认为hash模式，用URL的hash来模拟一个完整的URL，所以当URL改变时不会重新加载页面。

　　location.hash对应的是(#)后面的字符串，比如https://xxx.cn/xxx/6844904062698127367#heading对应的值是 #heading ，后面哈希值的变化不会导致浏览器向服务器发出请求，浏览器不发出请求也不会刷新页面。另外，每次哈希值发生变化时，都会触发事件hashchange，通过它我们可以知道哈希值发生了什么变化。然后我们可以监控hashchange来更新页面的一些内容：比如下面的代码监控一个网页的hash值的变化。

　　window . addevent listener( hashchange ，function() {

　　console.log(哈希已更改！)

　　}，假)；

　　当网页点击后退或前进时，哈希值会发生变化，触发上面的hashchange事件并打印出来。

（2）history模式

　　如果不想要难看的hash，我们可以使用路由的历史模式。这种模式充分利用history.pushState API完成URL跳转，无需重新加载页面。同时有一个popstate事件来监控状态变化，这样地址栏就没有 # 了。但是，当用户使用刷新等操作时，浏览器会向服务器发送请求。为了避免这种情况，这种实现需要服务器的支持，所有路由都需要重定向到根路由。这里，省略了服务器的配置。

　　window . addevent listener( pop state ，function() {

　　console.log(状态已改变！)

　　}，假)；

（3）两种模式的比较

　　相同：哈希和历史是浏览器本身的特性，Vue-router只是利用这两个特性(通过调用浏览器接口)来实现前端路由。

　　不同：hash模式会在浏览器的URL中添加 # ，而HTM5History没有 # 号。该URL与普通URL相同。

　　与直接修改hash相比，history有以下优点：a、pushState设置的新URL可以是与当前URL相同原点的任意URL；Hash只能修改#后面的部分，所以只能设置URL与当前文档相同的文档；by pushState设置的新URL可以与当前URL完全相同，这也会将记录添加到堆栈中；并且hash设置的新值必须不同于原始值，才能触发将记录添加到堆栈中；c、pushState可以通过stateObject向记录中添加任意类型的数据；Hash只能添加短字符串，pushState可以额外设置title属性供后续使用。

补充：路由模式解析

　　要说vue-router的路由模式，首先要知道路由是由多个URL组成的，使用不同的URL可以导航到不同的位置。

　　如果你做过服务器开发或者对http协议有所了解，你就会知道浏览器中对页面的访问是无状态的，所以我们在切换不同页面时都会提出新的请求。但是，当你实际使用vue和vue-router开发的时候，你就会明白，当你切换页面的时候，是没有重新请求的。它的使用就好像页面是有状态的一样。原因是什么？

　　其实这是借助浏览器的历史API来实现的，历史API可以让页面跳转而无需刷新，页面的状态在浏览器中得到维护。

　　vue-router默认使用Hash模式，即会出现如下URL:URL中带有#号。

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

　　从“vue”导入Vue

　　从“vue路由器”导入路由器

　　从“@/components/Main”导入总管

　　Vue.use(路由器)

　　导出默认新路由器({

　　strong模式：/strongstrong历史记录/strongstrong，/strong

　　路线：[

　　{

　　路径：“/”，

　　组件：主

　　}

　　]

　　})

　　这样，URL中的#号就被删除了。

　　实际上有三种模式：

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

　　历史：HTML5历史API和服务器配置。参考官网的HTML5历史模式

　　摘要：支持所有的javascript运行模式。如果没有找到浏览器API，路由将自动强制其进入此模式。

总结

　　关于vue前端路由和vue-router模式的这篇文章到此为止。有关vue路由和vue路由器模式的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。