什么是单页应用?

  单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序,是指在浏览器中运行的应用,它们在使用期间不会重新加载页面。像所有的应用一样,它旨在帮助用户完成任务,比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器加载的富客户端。

  为什么需要前端路由?

  根据单页面应用的定义得知,从头至尾一个应用有一个html文件,我们通过ajax技术来展现一个应用的不同模块,给用户的直观显示就是:地址栏url会根据应用模块进行变化。怎么通过url变化来展示不同的页面呢(只请求需要展示页面的信息,而不会去请求整个应用的数据呢)?答案就是前端路由,这就是vue-router(ngRouter或者react-router)存在的意义。

  我现在用的前端spa框架是vue,vue的御用路由库是vue-router,vue-router的路由模式有三种:

  hash:这种背后的原理是onhashchange事件,

vue-router路由模式的更多相关文章

  1. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  2. vue切换路由模式{hash/history}

    vue中常用的路由模式 hash(#):默认路由模式 histroy(/)切换路由模式 切换路由模式 export default new Router({ // 路由模式:hash(默认),hist ...

  3. Vue系列:Vue Router 路由梳理

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...

  4. 04 Vue Router路由管理器

    路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...

  5. Vue Router路由管理器介绍

    参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...

  6. Vue Router 路由守卫:完整的导航解析流程

    完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...

  7. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  8. Vue Router 路由实现原理

    一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash  ...

  9. vue router mode模式在webpack 打包上线问题

    vue-router mode模式有两种 hash和history. 1.hash —— 即地址栏 URL 中的 # 符号.比如这个 URL:http://www.abc.com/#/hello,ha ...

  10. Vue - Router 路由

    路由的注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. Re.常系数齐次递推

    前言 嗯   我之前的不知道多少天看这个的时候到底在干什么呢 为什么那么..  可能大佬们太强的缘故 最后仔细想想思路那么的emmm 不说了  要落泪了 唔唔唔 前置 多项式求逆 多项式除法/取模 常 ...

  2. 最近公共祖先(LCT)

    来一发\(LCT\)求\(LCA\) \(LCT\)在时间上不占据优势,码量似乎还比树剖,倍增,\(Tarjan\)大一点 但是却是一道\(LCT\)的练手题 对于每一个询问,我们只需要把其中一个点( ...

  3. Rest Framework

    目录导航 一.RESTful 规范 二.APIView 组件 三.序列化组件 四.认证组件 五.权限组件 六.频率组件 七.分页器组件 一.RESTful 规范 什么是RESTful规范: REST与 ...

  4. Rancher2.1安装部署

    基础环境配置 1.操作系统选择 Ubuntu 16.04(64位 Server版) Centos/RedHat Linux 7.5+(64位) 2.Docker版本选择 1.12.6 1.13.1 1 ...

  5. Angular+Ionic+RSA实现后端加密前端解密功能

    因业务需要,需要给android应用安装证书,通过读取证书文件内容实现某些功能的控制: 流程:后台通过publicKey对指定内容的文件进行加密,生成文件共客户下载,客户下载后选择该证书文件读取到应用 ...

  6. .NET面试题系列(十八)常用关键字

    序言 const和readonly关键字 private protected public internal的区别 out  ref out适合用在需要retrun多个返回值的地方,而ref则用在需要 ...

  7. (六)循环和控制语句及列表迭代(enumerate)

    一.pythoh中while.for.if的循环 嗯.........这个好像没什么好说的,简单粗暴来几个游戏! 1.来玩儿个猜数字游戏,需求:只能猜3次,小了提示小,大了提示大,猜对了游戏结束 3次 ...

  8. Luogu P1082 同余方程(NOIP 2012) 题解报告

    题目传送门 [题目大意] 求关于x的同余方程 ax≡1(mod b)的最小整数解. [思路分析] 由同余方程的有关知识可得,ax≡1(mod b)可以化为ax+by=1,此方程有解当且仅当gcd(a, ...

  9. dubbo注册中心

    官方推荐的是zookeeper注册中心. 1.Multicast 注册中心 Multicast 注册中心不需要启动任何中心节点,只要广播地址一样,就可以互相发现. 提供方启动时广播自己的地址消费方启动 ...

  10. 示波器X1探头和X10探头

    示波器探头有X1和X10档,当测量一个信号时应该如何选择? 1.先我们看它们的区别? X1档,表示信号没有经过衰减进入示波器 X10档,表示信号衰减10倍进入示波器(当示波器也设置为X10档,直接读数 ...