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

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. 不错的点击li标签删除的例子

    <script type="text/javascript">function delElement(obj){ obj.parentNode.removeChild( ...

  2. ENVI-IDL的MATH_DOIT和CF_DOIT函数（对FID和POS参数的讨论)

    MATH_DOIT相当于ENVI的band math,可以完成各种波段运算.参数比较简单,EXP为运算公式的字符串,其他参数均为常见参数. CF_DOIT可以将已有的文件保存为ENVI格式文件,相当于 ...

  3. python map 的用法

    map的用法 ——.我们来分析map在python的源码 class map(object): """ map(func, *iterables) --> map ...

  4. redis主从+哨兵模式(借鉴)

    三台机器分布 192.168.189.129  //  master的角色 192.168.189.130  //  slave1的角色 192.168.189.131  //  salve2的角色 ...

  5. 高性能异步分布式事务TCC框架(资料汇总)

    https://github.com/yu199195/hmily tcc源码解析系列(一)之项目结构 https://yu199195.github.io/2017/10/11/TCC/tcc-on ...

  6. SPOJ 4003 Phone List 题解

    题面 啊~,很水的一道trie树模板题: 当两个串存在关系时情况有两种: 若当前串插入后没有任何新建节点,则该串肯定是之前插入的某个串的前缀: 若在插入的时候,有某个经过的节点带有某串结尾的标记,则之 ...

  7. 最长不下降/不上升子序列&&最长上升/下降子序列

    最长不下降/不上升子序列&&最长上升/下降子序列 struct cmp1{bool operator()(int a,int b){return a>b;}}; int main ...

  8. 如何输出opencv编译信息

    本文链接:https://mangoroom.cn/opencv/how-to-print-compile-info-of-opencv.html opencv提供了一个函数,利用这个函数可以输出当前 ...

  9. centos中安装python3.7

    1.1 CentOS 7编译安装Python3.7.X 1.安装依赖&下载python3.7 # 1.yum更新yum源 yum update # 2.安装Python 3.7所需的依赖否则安 ...

  10. github标星11600+机器学习课程资源

    github标星11600+:最全的吴恩达机器学习课程资源(完整笔记.视频.python作业) 吴恩达老师的机器学习课程,可以说是机器学习入门的第一课和最热门课程,我在github开源了吴恩达机器学习 ...