SPA简介及路由

已于 2022-04-30 16:11:04 修改
阅读量624 收藏
点赞数
分类专栏： Vue 文章标签： vue.js
于 2022-04-30 16:10:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60269711/article/details/124514029
版权
本文介绍了SPA（单页应用）的概念，强调其在减少请求体积、提升页面响应速度和用户体验上的优势。深入讲解了SPA的实现思路，包括ajax、锚点和hashchange事件。还探讨了vue.js中的路由管理，特别是router-link组件的to和replace属性，并简述了js中const、var和let的区别。
摘要由CSDN通过智能技术生成

目录

SPA

1. SPA是什么

2. SPA实现思路和技术点

 路由

router-link相关属性

3. js中const,var,let区别

SPA

1. SPA是什么

 单页Web应用（single page application，SPA），就是只有一个Web页面的应用，
   是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序

   单页面应用程序：
     只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
   传统多页面应用程序：
     对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
   
   优势
     减少了请求体积，加快页面响应速度，降低了对服务器的压力
     更好的用户体验，让用户在web app感受native app的流畅


2. SPA实现思路和技术点

    1 ajax
   2 锚点的使用（window.location.hash #）
   3 hashchange 事件 window.addEventListener("hashchange",function () {})
   4 监听锚点值变化的事件，根据不同的锚点值，请求相应的数据
   5 原本用作页面内部进行跳转，定位并展示相应的内容 

 路由

通过vue的路由可实现多视图的单页Web应

最低0.47元/天 解锁文章
湘灏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中SPA与路由
小七
08-19 438
vue中SPA与路由一、什么是SPA？？单页面应用程序传统多页面应用程序优势二、SPA实现思路和技术点 一、什么是SPA？？ 单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序 单页面应用程序 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中 传统多页面应用程序 对于传统的多页面应用程序来说, 每次请求服务器返回
详解SPA中前端路由基本原理与实现方式
10-18
在深入探讨单页应用（SPA）的前端路由之前，有必要先回顾一下传统的后端路由模式。传统后端路由模式中，当用户通过浏览器地址栏访问不同的URL时，浏览器会向服务器发起请求，服务器则根据请求的URL处理逻辑并返回...
SPA路由实现
JunChow
04-14 222
需求：切换页面，异步加载JS，异步传参。 方式1：修改URL中的Hash URL可带Hash标识不同页面，通过Window对象的onhashchange事件修改URL中的hash值。 http://www.hostname.com/index#page-home http://www.hostname.com/index#page-profile http://www.hostna...
vue路由以及SPA技术的介绍
qq_62881798的博客
09-24 789
单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序单页面应用程序：只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中传统多页面应用程序：对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面优势减少了请求体积，加快页面响应速度，降低了对服务器的压力。
三分钟超级简单易上手的路由SPA实现思路~~
m0_67094505的博客
09-05 520
用于单页面Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面对于以前 使用的jsp做页面的时候，一个页面会有很多个jsp组成，现在我们。
vue spa应用中的路由缓存问题与解决方案
10-16
本文将详细讲解Vue中解决SPA路由缓存问题的方法。 首先，我们需要理解SPA中的路由缓存问题。当用户在SPA中前进和后退时，浏览器默认的行为是重新加载和渲染当前路由对应的组件，这会导致页面状态的丢失，比如滚动...
vue路由嵌套的SPA实现步骤
08-28
在SPA中，路由扮演着关键角色，它管理着用户界面与应用状态之间的映射。Vue Router 是Vue.js官方的路由库，它允许我们定义和管理应用的路由，实现页面间的平滑过渡。 在Vue Router中，路由嵌套是一种强大的特性，它...
spa项目路由通用配置
huangpb的博客
08-08 276
1. 定义路由 import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); const routes = [ { path: "/", component: () => import(/* webpackChunkName: "layout" */ "./layouts/BasicLayout"), beforeEnter: (to, from, next) =&gt.
路由控制和视图转换框架 SPA
kaosini的专栏
02-12 1074
概述 SPA是为构建WebApp设计的路由控制和视图转换框架 SPA专注于解决构建WebApp时遇到的共性问题，尤其适用于构建MobileApp， 我们和jQuery Mobile、Sencha Touch等框架不同， 并不是一个构建移动端应用的前端整体解决方案，所以我们不包含UI组件，如果你不想自己设计界面， 可以用Bootstrap、Topcoat等UI Component
vue全家桶之路由vue-router
weixin_45663264的博客
11-11 190
SPA （ single page App ） 单页面应用 多页面应用 有多个html文件，通过a标签的连接联通各个页面 缺点 开发起来太冗余，编译、压缩很耗时间 页面之间的跳转速度太慢，这个时候就会出现一个严重的问题，白屏 单页面应用 vue-router的优点 不需要刷新页面，因为它就是一个页面 这个页面内容在切换 单页面内容之间的切换要想实现我们就是用路由了 如今我们的app、后台管理系统 ...
SPA路由相关
luqingxuan
11-30 101
  https://github.com/browserstate/history.js   https://github.com/flatiron/director   https://github.com/visionmedia/page.js   https://github.com/tildeio/route-recognizer https://github.c...
SPA 中前端路由基本原理与实现方式
FareBlog
12-13 5495
通常 SPA 中前端路由有2中实现方式，本文会简单快速总结这两种方法及其实现： 修改 url 中 Hash 利用 H5 中的 history Hash我们都知道 url 中可以带有一个 hash， 比如下面 url 中的 page2https://www.abc.com/index.html#page2window 对象中有一个事件是 onhashchange，以下几种情况都会触发这个事件： 直接更
【太干了】深挖SPA单页应用路由
zz_jesse的博客
05-09 241
author:好学习吧https://juejin.im/post/5e85cb8151882573c66cf63f年后被迫跳槽，其中种种一言难尽，于是投递简历，虽然有了年前尝试积累，...
React：SPA和路由理解
xpmhhh的博客
03-28 1756
SPA： 单页Web应用（single page application） 整个页面只有一个完整的页面 点击页面中的链接不会刷新页面，只会做页面的局部更新 数据都需要通过ajax请求获取，并在前端异步展现 react：单页面多组件应用 路由： 什么是路由？ 一个路由就是一个映射关系（key: value） key为路径，value可能是function或component 路由分类 1. 后端路由 value是function，用来处理客户端提交的请求 工作过程：当node接收到一个请
对 SPA 应用的理解+路由的理解+路由的基本使用+路由的几个注意点
weixin_47075145的博客
10-12 651
1. 一个路由就是一组映射关系（key - value）2. key 为路径, value 可能是 function 或 component。
【Vue的路由，SPA概念】
旺旺的博客
08-03 511
目录前言SPA的概念路由的创建路由的使用router-link的相关属性replaceappend渲染总结 前言 本章是为了以后实现前端页面的搭建而写的， 重点在于如何实现 单页Web应用 因为相对于以前的传统多页面web，有很大的缺陷。 那么就必须了解一下Vue的路由设置。 SPA的概念 总的而言，我们知道之前的话都是用的是许多jsp,或html页面来组成我们的项目的。 那么这样有什么缺点呢...
SPA单页路由词典
dylanqrr的博客
08-23 415
一、angular ng                                //容器 var app=angular.module('myApp',['ng','ngRoute']); app.config(function($routeProvider){ $routeProvider.when('/login',{template
使用路由建立多视图单页应用（SPA）
Bugxiu_fu的博客
09-22 499
创建一个路由实现组件之间跳转，SAP简单介绍，vue中文件及文件夹命名规范
spa路由和hash路由的区别
最新发布
05-09
SPA（Single Page Application）路由和Hash路由都是前端路由的实现方式，但它们之间有一些区别。 SPA路由：SPA路由使用HTML5的history API，通过监听浏览器的历史记录，实现无刷新页面的前端路由。SPA路由的路径不带有#号，更加美观，且可以通过浏览器的前进和后退按钮进行导航。但是，SPA路由需要后端进行相应的配置，否则会在刷新页面时出现404错误。 Hash路由：Hash路由的路径带有#号，通过监听URL中的hash变化，实现无刷新页面的前端路由。Hash路由不需要后端进行额外的配置，可以直接在前端实现。但是，Hash路由不支持浏览器的前进和后退按钮导航，需要手动编写代码实现。 总之，SPA路由更加美观和实用，但需要后端配合，而Hash路由则更加简单易用，但部分功能受限。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值