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

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. python基础--面向对象初始

    # 类与对象,类是类别.种类,是面向对象设计中最重要的概念, # 对象是特征与技能的结合体, # 类是一系列对象相似特征与技能的结合体 # 例如:人是一个类,而我本人是一个对象,手,脚,是我的特征, ...

  2. 【VS开发】【智能语音处理】VS中声音的采集实现

    vc中声音的采集是用api函数来实现的. 一.数字音频基础知识  Fourier级数:  任何周期的波形可以分解成多个正弦波,这些正弦波的频率都是整数倍.级数中其他正线波的频率是基础频率的整数倍.基础 ...

  3. [转帖]VPS、虚拟主机、云主机的区别

    引用知乎网友通俗的例子解释: https://www.cnblogs.com/fjping0606/p/9993849.html 其实 应该是 vps 只是 单台物理机上面的虚拟机 云主机 可能是资源 ...

  4. 开发完成的springboot项目扩展 swagger

    第一步:pom.xml 引入 swagger 配置 <swagger.version>2.9.2</swagger.version> <!--swagger start- ...

  5. vs 小贴士

    1. ubuntu上vs code root执行 sudo code --user-data-dir="~/.vscode-root" 2. 设置vs code 打开在新的标签页打 ...

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

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

  7. Luogu P3942 将军令

    题目 维护每个点子树中最深的没有被覆盖的点(仅计算这条链上的关键点)的距离. 若\(u\)为关键点,则\(d_u=-k-1\). 记录\(mx=\max\limits_{v\in son_u}d_v+ ...

  8. java实现spark常用算子之cogroup

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaPairRDD;import org.apache.spa ...

  9. 搜索框focus 搜索面板显示 点击别处消失 从浏览器别的页面回来消失

    开始是设置了回到页面使display:none(离开页面操作失效),但是发现回到页面,面板显示,dom获取却为null,于是做了个延时的处理 currentPage: function() { var ...

  10. 新霸哥带你轻松玩转Oracle数据库

    接触过软件开发的朋友可能都会知道oracle,在开发的过程中,数据存储都可能会用到oracle的,因为oracle具有处理速度快,安全级别特别的高.但是有一个缺点就是比较的贵,只有一个大型的公司才有可 ...