一、什么是路由

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 开发)的更多相关文章

  1. Vue.JS快速上手(组件生命周期)

    一.什么是组件 组成网页独立功能基本单元(片段), 复用.维护.性能, Vue.js中的组件就是一个Vue的实例,Vue中的组件包含data/methods/computed. 一个Vue.js的应用 ...

  2. Vue.JS快速上手(指令和实例方法)

    1.声明式渲染 首先,我们要知道Vue是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...

  3. Vue.JS快速上手(组件间的通信)

    前言 Vue采用的是组件化思想,那么这些组件间是如何通信的呢?下面详细介绍一下. 所谓组件间通信,不单单是我们字面上理解的相互传递数据,这里还包括一个组件访问另一个组件的实例方法等,如父组件通过ref ...

  4. Vue.js—快速入门

    Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...

  5. Vue.js—快速入门及实现用户信息的增删

    Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...

  6. Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  7. Vue.js 2 vs Vue.js 3的实现 – 云栖社区

    Vue.js 2 vs Vue.js 3的实现 – 云栖社区 vue.js核心团队已经讨论过将在Vue3实现的变化.虽然API不会改变,但是数据响应机制(译者注:对数据改变的监听和通知)发生了变化.这 ...

  8. day67:Vue:es6基本语法&vue.js基本使用&vue指令系统

    目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...

  9. Vue.js 快速入门

    什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...

随机推荐

  1. element取消全局loading

    背景 前两天在开发一个管理后台项目时, 遇到了一个问题,后端接口返回特别慢,由于该接口调用的是第三方API,无法通过后端去处理.此时想到用loading动画,但随之而来也产生了不少问题, 在此记录一下 ...

  2. 【递归+树】FBI树

    题目描述 我们可以把由"0"和"1"组成的字符串分为三类:全"0"串称为BB串,全"1"串称为I串,既含"0& ...

  3. Visual Studio2019下载最新离线安装包

    首先可以参考微软官方的离线安装说明-->点击这里打开 =================================================================== 1. ...

  4. 利用C++11可变模板,封装调用dll导出函数

    起因 开发中经常需要动态调用一些导出函数,试着利用C++11特性封装一下 尝试 常规使用 typedef int WINAPI (*TMessageBoxA)(HWND hWnd,LPCSTR lpT ...

  5. webSocket实现多人聊天功能

    webSocket实现多人在线聊天 主要思路如下: 1.使用vue构建简单的聊天室界面 2.基于nodeJs 的webSocket开启一个socket后台服务,前端使用H5的webSocket来创建一 ...

  6. SQL SERVER Date列和Time列合并成一列处理报表数据

    问题原由: intouch项目中,利用intouch脚本来存储数据时,存入的时间格式为:date,time分开存储.在报表需求中,有需要利用查询两个时间段之间的数据. 问题解决: 1.直接写脚本(写出 ...

  7. 原来select语句在MySQL中是这样执行的!看完又涨见识了!这回我要碾压面试官!

    大家好,我是冰河~~ MySQL作为互联网行业使用最多的关系型数据库之一,与其免费.开源的特性是密不可分的.然而,很多小伙伴工作了很多年,只知道使用MySQL进行CRUD操作,这也导致很多小伙伴工作多 ...

  8. ES6新特征

    1.块级作用域 {   }  就是块级作用域,还包括if.else.for.while...下都属于块级作用域. let 声明的变量不存在变量的提升,不允许let反复声明同一个变量:块级作用域下let ...

  9. selenium WebDriverWait

    Selenium WebDriverWait的知识: 一.webdrivewait 示例代码  from selenium import webdriver  from selenium.webdri ...

  10. .NET Core/.NET5/.NET6 开源项目汇总12:WPF组件库2

    系列目录     [已更新最新开发文章,点击查看详细] WPF(Windows Presentation Foundation)是微软推出的基于Windows 的用户界面框架,属于.NET Frame ...