路由和组件是有区别的：组件一般是在同一个页面的不同模块，但是路由是直接切换到另一个页面，之前的页面销毁。

App.vue中的router-view会渲染顶级路由匹配到的组件。组件内部嵌套的router-view会渲染子路由匹配到的组件。

当路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。
定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。
总体来讲vue里面提供了三大类钩子
1.全局守卫
router.beforeEach 全局前置守卫 进入路由之前
router.beforeResolve 全局解析守卫 在beforeRouteEnter调用之后调用
router.afterEach 全局后置钩子 进入路由之后
2.路由守卫
router.beforeEnter进入路由之前
3.组件守卫
beforeRouteEnter 进入路由前
beforeRouteUpdate 路由复用同一个组件时
beforeRouteLeave 离开当前路由时

完整的导航解析流程

触发进入其他路由。
调用要离开路由的组件守卫beforeRouteLeave
调用局前置守卫：beforeEach
在重用的组件里调用 beforeRouteUpdate
调用路由独享守卫 beforeEnter。
解析异步路由组件。
在将要进入的路由组件中调用beforeRouteEnter
调用全局解析守卫 beforeResolve
导航被确认。
调用全局后置钩子的 afterEach 钩子。
触发DOM更新(mounted)。
执行beforeRouteEnter 守卫中传给 next 的回调函数
总结：除了router.afterEach是两个参数to,from以外，其他都是三个参数，to,from,next

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

  1. Vue router 一个路由对应多个视图

    使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...

  2. Vue 中的Vue Router一级路由，二级路由，三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  3. Vue router 全局路由守卫

    记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...

  4. vue router动态路由

    <div id="#app"> <router-link to="/user/header">路由1</router-link&g ...

  5. vue router引入路由与路由配置容易犯错的地方与常见的报错与处理报错

    首先npm安装vue-router插件,就不说了其次: 先看下我本地的目录结构吧 第一步:在src目录下新建一个专门存放router的index.js文件里面的内容为: import Vue from ...

  6. [Vue 牛刀小试]：第十三章 - Vue Router 基础使用再探（命名路由、命名视图、路由传参）

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  7. Vue.js 2.x笔记：路由Vue Router（6）

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

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

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

  9. react router @4 和 vue路由 详解(六)vue怎么通过路由传参？

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

  10. react router @4 和 vue路由 详解(四)vue如何在路由里面定义一个子路由

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 6.vue如何在路由里面定义一个子路由? 给父路由加一个 children:[] 参考我 ...

随机推荐

  1. Asp.Net Webform 常用代码

    1015.ASP.Net WebForm 数据绑定 < %# %>   < %= %>   < % %>  < %@ %> Eval("Nam ...

  2. golang init方法和main方法初始化顺序

    init()和main()方法是golang默认的两个方法,不需要我们调用,程序执行会自动寻找项目中的这俩方法.现在我们就讲一种通用的情况:main 包下 导入了 init2 包而在init2 包下又 ...

  3. 应用安全 - 工具 - 浏览器 - 火狐(FireFox) - 漏洞汇总

    CVE-2010-3131   Date Aug 类型 Mozilla Firefox - 'dwmapi.dll' DLL Hijacking 影响范围 Firefox <= CVE-2010 ...

  4. 7.接入类流程-PRACH优化

    PRACH优化 就是伪随机序列随机码(前导序列码).优化的目的就是减小码与码之间碰撞的 基站广播伪随机序列码(如64个),终端挑选一个发送.不同的用户使用同一个码就会产生碰撞.同频组网情况下,邻区的伪 ...

  5. 简述在Js或Vue中监听页面的刷新、关闭操作

    1.背景 大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统.信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失.而最近在做项 ...

  6. 小记---------linux远程连接集群内其他机器mysql库

    mysql -h -u maxwell -p#10.0.15.145 远程机器ip#-P 注意是大写P 端口#-u 用户#-p 密码

  7. [UER #1] DZY Loves Graph

    题目描述 开始有 \(n\) 个点,现在对这 \(n\) 个点进行了 \(m\) 次操作,对于第 \(i\) 个操作(从 \(1\) 开始编号)有可能的三种情况: \(Add\) a b: 表示在 \ ...

  8. c++实现直接插入排序

    基本概念 直接插入排序是一种最简单的排序方法,排序过程为:先将第一个元素看作是只有一个元素的有序子表,然后从第二个元素开始,将待排序元素依次插入到前面有序的子表中,直到全部排序完毕.在整个过程中,前面 ...

  9. springBoot2.0配置profile

    1. 使用yaml来配置,直接配置application.yml文件 server: port: 8888 spring: profiles: active: dev # 激活生产环境 --- # 测 ...

  10. 【golang】浅析rune数据类型

    golang中string底层是通过byte数组实现的.中文字符在unicode下占2个字节,在utf-8编码下占3个字节,而golang默认编码正好是utf-8. golang中还有一个byte数据 ...