我所理解的VUE路由管理-优快云博客

本文链接：https://blog.youkuaiyun.com/ch_s_t/article/details/138946754

Web应用在现代的互联网应用中占据非常重要的地位,大屏电脑、笔记本、平板、手机等设备的界面显示有统一使用web界面的趋式,设计一套界面,适应于多种设备已成为一种客观现实,，web前端已经从简单的网站开发成长为专用前端技术，有简单、适用范围广等特点.。

一 WEB应用简介

WEB的开发与应用可以分为单页面应用（SPA SinglePage Application）和多页面应用(MPA MultiPage Application)，多页面应用是传统的web应用程序，每个页面都是独立的HTML文件，每次页面刷新都会加载整个页面。单页面应用基于现代web技术，它使用一个javascript在一个单独的页面上构建整个应用程序，实现局部刷新、数据异步加载和响应式布局等特性。

多页面应用的优点：

有利于SEO优化：每个页面都有自己的URL地址，可以更容易地针对每个页面进行SEO优化。
安全性更高：多页面应用程序使用后端进行数据处理和业务逻辑处理，可以更好地防止XSS和CSRF等攻击。
首次加载时间优化：由于每个页面只需要加载自己的资源文件和数据，所以首次加载时间相对较短。

多页面应用的缺点：

用户体验较差：由于页面刷新可能需要花费较长的时间，用户体验可能相对较差。
操作复杂：当需要在不同页面之间进行切换时，需要重新加载整个页面，用户操作可能较为繁琐。
维护复杂：每个页面都是单独的HTML文件，所以多页面应用可能比较复杂，不易于维护

单页面应用优点：

用户体验良好：SPA具有快速和流畅的页面切换和局部更新效果，可以提供更好的用户交互和体验。
高效性能：SPA不需要每次刷新页面，只需要更新局部，可以大大减少页面切换时间和服务器负载。
易于维护：由于SPA使用单一页面，使得应用程序结构更加简单，易于维护。

单页面应用的缺点：

首次加载时间长：由于SPA需要加载单个页面，所以在首次加载时，需要加载所有的JavaScript、CSS和HTML文件，可能需要很长时间才能完成。
SEO不友好：由于只有一个HTML文件，搜索引擎很难找到页面的内容和关键字，对SEO有一定的影响。
安全问题：由于SPA需要在前端处理大部分业务逻辑和数据处理，因此容易受到XSS和CSRF等攻击。

综上所述，SPA更适合需要快速响应和更好用户体验要求的应用程序，而MPA则适用于需要更好的SEO和安全性的应用程序。

在单页面应用中，前后端分离成为主流，前端页面完全变成了组件化，不同的页面就是不同的组件，页面的切换就是组件的切换。页面切换的时候不需要再通过HTTP请求，直接JS解析URL地址，然后找到对应的组件进行渲染、不仅页面无刷新，甚至页面跳转也可以无刷新。整个项目只有一个HTML文件，不同视图（组件的模板）的内容都是在同一个页面中渲染的。当用户切换页面时，页面之间的跳转都是在浏览器端完成的，前端路由（借鉴后端路由概念，传统MVC架构的WEB开发在后台设置路由规则，当用户发送请求时，后台根据设定的路由规则将数据渲染到模板中，并将模板返回给用户）随之应运而生。Vue Router是Vue的官方路由，是Vue 生态中前端路由的解决方案，与Vue核心深度集成，可以在SPA中创建一个无限的路由组合。

二 Vue Router的实现原理

单页面应用之所以做到页面跳转时不刷新，其核心在于以下两点：

1、改变URL，页面不刷新。

2、改变URL，可以监听到路由的变化并能够做出一些处理

基于浏览器的核心实现分为Hash和HTML5两种历史模式：

Hash模式：

Hash模式是Vue Router利用浏览器的特性，Hash是URL中hash(#)及后面的哪部分（如http://example.com/#user中的#user）,常用作锚点在页面内进行导航，Hash值的变化并不会导致浏览器向服务器发出请求，浏览不发出请求，也就不会刷新页面，所以也不需要在服务器层面上进行任何特殊处理（因此它并不利于SEO），之后通过主动跳转或者监听hashchange事件监听URL的变化即可实现我们的目标。因为这种特性，使WEB应用程序在没有主机的情况下也能正常跳转。

HTML5模式

随着HTML5的发展，浏览器的不断更新，HTML5 History方法变得强大，它提供了pushState和replaceState两个方法，这两个方法改变URL的path部分不会引起页面刷新，同时它提供类似hashchange事件的popstate事件，但又区别于hashchange事件：通过浏览器前进、后退改变URL时会触发popstate事件，而通过pushState/replaceState或<a>标签改变URL不会触发popstate事件。

Vue Router的HTML5模式是利用HTML5的HistoryApi来控制状态（通过拦截pushState/replaceState的调用和<a>标签的单击事件来检测URL的变化），当使用这种历史模式时，URL没有像Hash历史模式的"#",会看起来很“正常”，例如https://example.com/user/id。

三安装引入

1、直接引入

直接引入是在HTML中通过script标签直接引入编译好的JS文件，这个文件可以是官方提供的CDN 地址(https://unpkg.com/vue-router@4),或者从CDN地址下载后存放到指定位置的地址，如下：

<script src="https://unpkg.com/vue-router@4"></script>

注意：通过使用script标签引入Vue Router需要在引入Vue文件之后引入。

这种通过script标签引入VueRouter文件的方式将在全局暴露Vue Router对象，可以通过Vue Router访问其下所有的属性和方法。

2、使用npm安装

通