Vue中前端路由和vue-router两种模式有何区别？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1630个文字，预计阅读时间需要7分钟。
前言：路径这个概念最早在前后端分离的架构中出现在后端。随着前后端分离，后端仅负责数据处理和业务逻辑，前端负责界面展示和交互。路径也随之分离，从前端直接映射到后端服务。
内容：随着互联网的发展，前端应用逐渐从简单的静态页面演变为复杂的多页面应用。在这一过程中，路径概念也得到了发展和演变。
1. 后端路径后端路径最早出现在传统的B/S架构中。在早期，前端仅负责页面展示，后端负责处理数据，路径主要是后端的URL路径。前端通过请求后端的路径来获取数据或触发后端的服务。
2. 前后端分离后的路径随着前后端分离架构的流行，前后端职责逐渐清晰。路径在前后端分离的应用中分为前端路径和后端路径：- 前端路径：指的是前端路由中的路径，如Vue Router中的路由路径。- 后端路径：指的是后端服务的API接口路径。
3. 单页面应用（SPA）中的路径单页面应用的出现，使得前端应用中的路径从多页面跳转转变为单页面内部跳转。虽然用户看到的URL会发生变化，但实际上页面内容并未发生实质性的跳转，而是通过JavaScript动态加载内容来实现。这要求前后端的路径保持一致，以避免用户在URL输入错误时导致404错误。
4. 路径变化的总结- 路径在后端出现最早，是传统B/S架构的重要组成部分。- 随着前后端分离，路径在前后端之间进行分离，分别对应前端路由和后端API接口。- 单页面应用的出现使得路径主要集中在前端路由，且路径需保持一致性以提供良好的用户体验。- Vue Router中的路由模式，如hash模式、history模式和抽象路由等，都是对路径的不同实现方式。
通过上述总结，我们可以更好地理解路径在后端和Vue Router中的应用及其演变过程。
前言路由这个概念最早在后端出现，随后前后端分离，直至当今的单页面应用，路由也在一直发生变化。本文来总结一下路由变化和vue-router中的路由模式区别相关知识点。
正文 1、什么是前端路由 （1）后端路由阶段早期的页面都是由html页面在服务端渲染的，服务端直接返回给客户端渲染好的html页面供展示，一个页面对应一个URL,首先向服务端请求对应的URL,服务器根据此URL去匹配对应的controller,最终生成html页面返回给客户端。这种方法有利于SEO的优化，但是这种页面html和数据逻辑混合在一块，开发人员开发维护起来困难。
（2）前后端分离路由阶段随着Ajax的出现，由了前后端分离的开发方式，后端只负责逻辑处理和返回数据，前端只负责通过ajax将数据渲染到页面。
（3）单页面应用阶段其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.也就是前端来维护一套路由规则。
2、vue-router 提供了 hash 和 history 两种路由模式vue-router的作用就是通过改变URL，在不重新请求页面的情况下，更新页面视图。简单的说就是，虽然地址栏的地址改变了，但是并不是一个全新的页面，而是之前的页面某些部分进行了修改。要想解决上面的问题，前提需要知道浏览器window的history对象和location对象的hash属性(详情见 history对象详解)，这两个对象分别存在页面路径跳转，但是页面不刷新的功能。
（1）hash模式对应了location对象的hash属性，vue-router 默认 hash 模式,使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
location.hash 对应 "(#)" 后面的字符串，比如：xxx.cn/xxx/6844904062698127367#heading对应的值为 "#heading"，后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发 hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听 hashchange 来实现更新页面部分内容的操作：比如下面的代码监听一个网页 hash 值变化
window.addEventListener('hashchange', function() { console.log('The hash has changed!') }, false);
当网页点击返回或者前进的时候，hash值会发生变化，会触发上面的hashchange事件并打印。
（2）history模式如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面，同时还有popstate 事件来监听state变化，这样地址栏中路径就没有了"#",但是当用户使用了刷新等操作的时候，浏览器会给服务器发送请求，为了避免这种情况出现，所以这个实现需要服务端的支持，需要把所有路由都重定向到根路由，这里省略服务端的配置。
window.addEventListener('popstate', function() { console.log('The state has changed!') }, false); （3）两种模式的比较
同：hash和history都是属于浏览器自身的特性，Vue-router只是利用了这两个特性（通过调用浏览器接口）来实现前端路由。
不同：hash模式 会在浏览器的URL中加入'#'，而HTM5History就没有'#'号，URL和正常的URL一样。
history比于直接修改hash主要有以下优势：a、pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL；b、pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中；c、pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串，且pushState可额外设置title属性供后续使用。
写在最后以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。
本文共计1630个文字，预计阅读时间需要7分钟。
前言：路径这个概念最早在前后端分离的架构中出现在后端。随着前后端分离，后端仅负责数据处理和业务逻辑，前端负责界面展示和交互。路径也随之分离，从前端直接映射到后端服务。
内容：随着互联网的发展，前端应用逐渐从简单的静态页面演变为复杂的多页面应用。在这一过程中，路径概念也得到了发展和演变。
1. 后端路径后端路径最早出现在传统的B/S架构中。在早期，前端仅负责页面展示，后端负责处理数据，路径主要是后端的URL路径。前端通过请求后端的路径来获取数据或触发后端的服务。
2. 前后端分离后的路径随着前后端分离架构的流行，前后端职责逐渐清晰。路径在前后端分离的应用中分为前端路径和后端路径：- 前端路径：指的是前端路由中的路径，如Vue Router中的路由路径。- 后端路径：指的是后端服务的API接口路径。
3. 单页面应用（SPA）中的路径单页面应用的出现，使得前端应用中的路径从多页面跳转转变为单页面内部跳转。虽然用户看到的URL会发生变化，但实际上页面内容并未发生实质性的跳转，而是通过JavaScript动态加载内容来实现。这要求前后端的路径保持一致，以避免用户在URL输入错误时导致404错误。
4. 路径变化的总结- 路径在后端出现最早，是传统B/S架构的重要组成部分。- 随着前后端分离，路径在前后端之间进行分离，分别对应前端路由和后端API接口。- 单页面应用的出现使得路径主要集中在前端路由，且路径需保持一致性以提供良好的用户体验。- Vue Router中的路由模式，如hash模式、history模式和抽象路由等，都是对路径的不同实现方式。
通过上述总结，我们可以更好地理解路径在后端和Vue Router中的应用及其演变过程。
前言路由这个概念最早在后端出现，随后前后端分离，直至当今的单页面应用，路由也在一直发生变化。本文来总结一下路由变化和vue-router中的路由模式区别相关知识点。
正文 1、什么是前端路由 （1）后端路由阶段早期的页面都是由html页面在服务端渲染的，服务端直接返回给客户端渲染好的html页面供展示，一个页面对应一个URL,首先向服务端请求对应的URL,服务器根据此URL去匹配对应的controller,最终生成html页面返回给客户端。这种方法有利于SEO的优化，但是这种页面html和数据逻辑混合在一块，开发人员开发维护起来困难。
（2）前后端分离路由阶段随着Ajax的出现，由了前后端分离的开发方式，后端只负责逻辑处理和返回数据，前端只负责通过ajax将数据渲染到页面。
（3）单页面应用阶段其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.也就是前端来维护一套路由规则。
2、vue-router 提供了 hash 和 history 两种路由模式vue-router的作用就是通过改变URL，在不重新请求页面的情况下，更新页面视图。简单的说就是，虽然地址栏的地址改变了，但是并不是一个全新的页面，而是之前的页面某些部分进行了修改。要想解决上面的问题，前提需要知道浏览器window的history对象和location对象的hash属性(详情见 history对象详解)，这两个对象分别存在页面路径跳转，但是页面不刷新的功能。
（1）hash模式对应了location对象的hash属性，vue-router 默认 hash 模式,使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
location.hash 对应 "(#)" 后面的字符串，比如：xxx.cn/xxx/6844904062698127367#heading对应的值为 "#heading"，后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发 hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听 hashchange 来实现更新页面部分内容的操作：比如下面的代码监听一个网页 hash 值变化
window.addEventListener('hashchange', function() { console.log('The hash has changed!') }, false);
当网页点击返回或者前进的时候，hash值会发生变化，会触发上面的hashchange事件并打印。
（2）history模式如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面，同时还有popstate 事件来监听state变化，这样地址栏中路径就没有了"#",但是当用户使用了刷新等操作的时候，浏览器会给服务器发送请求，为了避免这种情况出现，所以这个实现需要服务端的支持，需要把所有路由都重定向到根路由，这里省略服务端的配置。
window.addEventListener('popstate', function() { console.log('The state has changed!') }, false); （3）两种模式的比较
同：hash和history都是属于浏览器自身的特性，Vue-router只是利用了这两个特性（通过调用浏览器接口）来实现前端路由。
不同：hash模式 会在浏览器的URL中加入'#'，而HTM5History就没有'#'号，URL和正常的URL一样。
history比于直接修改hash主要有以下优势：a、pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL；b、pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中；c、pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串，且pushState可额外设置title属性供后续使用。
写在最后以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。