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

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. LeetCode.1002-寻找共有字符(Find Common Characters)

    这是悦乐书的第375次更新,第402篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第236题(顺位题号是1002).给定仅由小写字母组成的字符串A,返回列表中所有字符串都 ...

  2. DataGridView中EnditCommit()调用之后,单元格的内容被全选了,每次输入都要鼠标点击定位到最后才能继续输入

    因为某些需求,DataGridView在输入一次内容,就要调用ECommitEdit(DataGridViewDataErrorContexts.Commit)来将内容提交,但是这样做之后,控件就会当 ...

  3. 爬取网易云音乐评论!python 爬虫入门实战(六)selenium 入门!

    说到爬虫,第一时间可能就会想到网易云音乐的评论.网易云音乐评论里藏了许多宝藏,那么让我们一起学习如何用 python 挖宝藏吧! 既然是宝藏,肯定是用要用钥匙加密的.打开 Chrome 分析 Head ...

  4. HDU 1159 Common Subsequence (动态规划、最长公共子序列)

    Common Subsequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  5. 快速乘+快速幂(用于模数超过int范围)

    一般的快速幂并不适合模数大于int范围的情况,因为在乘法运算的过程可能会出现超出long long的情况出现.这个时候可以利用快速幂的思想使用快速乘,原理就是模拟乘法运算,将乘法运算分解成加法运算,再 ...

  6. (5.1.5)引擎管理——多服务器管理之中央管理服务器(CMS)

    关键词:中央管理服务器,CMS,多服务器管理 中央管理服务器 -[1]打开 视图->已注册的服务器 [2]注册中央管理服务器 右击中央管理器->注册中央管理服务器 这里输入IP.主机名都可 ...

  7. 第一课 初识Linux(一)

    Linux起源 创始人:李纳斯.托瓦兹 Linux简介: Linux是一套免费使用和自由传播的类UNIX操作系统:是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.Lin ...

  8. gym102201F_Fruit Tree

    题意 给一棵带权树,多次询问路径上出现次数超过一半的数. 分析 dfs序建主席树,维护的就是根到某个节点这段路径的值域情况. 因为题目所求的不是一般的众数,而是出现次数大于一半的,所以在主席树上可以直 ...

  9. java 字符串锁

    package com.example.demo.controller; public class StringLock { public void method(String p) { // new ...

  10. [转载]Jupyter Notebook中自动补全代码

    原文地址:https://yq.aliyun.com/articles/667928 在公众号之前的文章中,已经介绍了在Jupyter Notebook中设置主题以及输出代码文件到pdf文件中,本文来 ...