Vue.JS快速上手(Vue-router 实现SPA 开发)
一、什么是路由
URL -> 映射 -> 组件
Hash+onhashchange
History.pushstate+replaceState+onpopstate
二、准备工作
组件
router-link: 导航,最终默认情况生成a标签
router-view:组件容器,占位符(插座), 相当于之前.container的div
对象
routes: 路由表, 配置url与组件间的关系集合
router: 路由对象, 存储路由相关信息,并可以操作路由切换
三、使用vue-router 开发SPA 基本步骤
第1步:安装vue-router
第2步:导入路由模块
第3步:配置路由表
第4步:创建路由对象
第5步:注入路由对象
第6步:导航(静态与动态)
第7步:添加路由插座(router-view)
四、使用路由实现组件间数据传递
1.查询字符串
2.路由参数
五、路由嵌套
六、路由守卫
1 什么是守卫
路由切换时,控制组件加载前或离开后的行为, 如:组件访问前的权限,统计组件停留的时间(前、后),
2 守卫类型
触发时机:前守卫与后守卫
作用域:
全局守卫: 控制任何路由切换
独立守卫:控制针对特定路由切换
组件守卫:专门控制特定组件
七、路由懒加载
Vue.JS快速上手(Vue-router 实现SPA 开发)的更多相关文章
- Vue.JS快速上手(组件生命周期)
一.什么是组件 组成网页独立功能基本单元(片段), 复用.维护.性能, Vue.js中的组件就是一个Vue的实例,Vue中的组件包含data/methods/computed. 一个Vue.js的应用 ...
- Vue.JS快速上手(指令和实例方法)
1.声明式渲染 首先,我们要知道Vue是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...
- Vue.JS快速上手(组件间的通信)
前言 Vue采用的是组件化思想,那么这些组件间是如何通信的呢?下面详细介绍一下. 所谓组件间通信,不单单是我们字面上理解的相互传递数据,这里还包括一个组件访问另一个组件的实例方法等,如父组件通过ref ...
- Vue.js—快速入门
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
- Vue.js—快速入门及实现用户信息的增删
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
- Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
- Vue.js 2 vs Vue.js 3的实现 – 云栖社区
Vue.js 2 vs Vue.js 3的实现 – 云栖社区 vue.js核心团队已经讨论过将在Vue3实现的变化.虽然API不会改变,但是数据响应机制(译者注:对数据改变的监听和通知)发生了变化.这 ...
- day67:Vue:es6基本语法&vue.js基本使用&vue指令系统
目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...
- Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...
随机推荐
- element取消全局loading
背景 前两天在开发一个管理后台项目时, 遇到了一个问题,后端接口返回特别慢,由于该接口调用的是第三方API,无法通过后端去处理.此时想到用loading动画,但随之而来也产生了不少问题, 在此记录一下 ...
- 【递归+树】FBI树
题目描述 我们可以把由"0"和"1"组成的字符串分为三类:全"0"串称为BB串,全"1"串称为I串,既含"0& ...
- Visual Studio2019下载最新离线安装包
首先可以参考微软官方的离线安装说明-->点击这里打开 =================================================================== 1. ...
- 利用C++11可变模板,封装调用dll导出函数
起因 开发中经常需要动态调用一些导出函数,试着利用C++11特性封装一下 尝试 常规使用 typedef int WINAPI (*TMessageBoxA)(HWND hWnd,LPCSTR lpT ...
- webSocket实现多人聊天功能
webSocket实现多人在线聊天 主要思路如下: 1.使用vue构建简单的聊天室界面 2.基于nodeJs 的webSocket开启一个socket后台服务,前端使用H5的webSocket来创建一 ...
- SQL SERVER Date列和Time列合并成一列处理报表数据
问题原由: intouch项目中,利用intouch脚本来存储数据时,存入的时间格式为:date,time分开存储.在报表需求中,有需要利用查询两个时间段之间的数据. 问题解决: 1.直接写脚本(写出 ...
- 原来select语句在MySQL中是这样执行的!看完又涨见识了!这回我要碾压面试官!
大家好,我是冰河~~ MySQL作为互联网行业使用最多的关系型数据库之一,与其免费.开源的特性是密不可分的.然而,很多小伙伴工作了很多年,只知道使用MySQL进行CRUD操作,这也导致很多小伙伴工作多 ...
- ES6新特征
1.块级作用域 { } 就是块级作用域,还包括if.else.for.while...下都属于块级作用域. let 声明的变量不存在变量的提升,不允许let反复声明同一个变量:块级作用域下let ...
- selenium WebDriverWait
Selenium WebDriverWait的知识: 一.webdrivewait 示例代码 from selenium import webdriver from selenium.webdri ...
- .NET Core/.NET5/.NET6 开源项目汇总12:WPF组件库2
系列目录 [已更新最新开发文章,点击查看详细] WPF(Windows Presentation Foundation)是微软推出的基于Windows 的用户界面框架,属于.NET Frame ...