我所理解的VUE路由管理

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

一 WEB应用简介

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

多页面应用的优点:

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

多页面应用的缺点:

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

单页面应用优点:

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

单页面应用的缺点:

  1. 首次加载时间长:由于SPA需要加载单个页面,所以在首次加载时,需要加载所有的JavaScript、CSS和HTML文件,可能需要很长时间才能完成。
  2. SEO不友好:由于只有一个HTML文件,搜索引擎很难找到页面的内容和关键字,对SEO有一定的影响。
  3. 安全问题:由于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安装

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值