第十五单元(熟练使用vue-router插件)

#课程目标

1、掌握路由嵌套

2、掌握导航守卫

#知识点

#一、路由嵌套

很多时候,我们会在一个视口中实现局部页面的切换。这时候就需要到了嵌套路由。

也就是说一个被渲染组件同样可以包含自己的嵌套 <router-view>

const router = new VueRouter({
routes: [
{ path: '/cinema', //电影
component: Cinema,
children: [
{
path: 'hot', //正在热映
component: Hot
},
{
path: 'ing', //即将上映
component: Ing
}
]
}
]
})
注意:二级路由的path不加/会从父路由找起,加/会从跟路由找起
 

#二、导航守卫

共有三种守卫:全局的, 单个路由独享的, 或者组件级的。

1、全局前置守卫

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
// ...
})
 
  • to: Route: 即将要进入的目标 路由对象

  • from: Route: 当前导航正要离开的路由

  • next: Function:

    ​ next(false)中断当前导航

    ​ next('/') 或者 next({ path: '/' }) 跳转到其他路由

    ​ 确保要调用 next 方法,否则钩子就不会被 resolved

2、全局后置钩子

router.afterEach((to, from) => {
// ... 没有next
})
 

3、路由独享的守卫

const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
 

4、组件内的守卫

  • beforeRouteEnter 不能 访问 this ,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

    不过,你可以通过传一个回调给 next来访问组件实例

  • beforeRouteUpdate (2.2 新增)

  • beforeRouteLeave

    const Foo = {
    template: `...`,
    beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不!能!获取组件实例 `this`
    // 因为当守卫执行前,组件实例还没被创建
    next(vm => {
    // 通过 `vm` 访问组件实例
    })
    },
    beforeRouteUpdate (to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    },
    beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    }
    }
     

案例讲解:美团外卖:进入收藏页面前,进行路由守卫:如果当前用户已登录则进入收藏,否则进入登录页面。

#授课思路

#案例作业

一、花礼网

vue第十五单元(熟练使用vue-router插件)的更多相关文章

  1. vue第十六单元(element-ui vue-lazyload 等常用插件)

    第十六单元(element-ui vue-lazyload 等常用插件) #课程目标 1.掌握插件的引入方式 2.精通UI框架 3.掌握前端常见的几种效果实现 #知识点 一.elementUI的使用 ...

  2. react第十五单元(react路由的封装,以及路由数据的提取)

    第十五单元(react路由的封装,以及路由数据的提取) #课程目标 熟悉react路由组件及路由传参,封装路由组件能够处理路由表 对多级路由能够实现封装通用路由传递逻辑,实现多级路由的递归传参 对复杂 ...

  3. vue第十九单元(mapState mapMutations等方法的使用)

    第十九单元(mapState mapMutations等方法的使用) #课程目标 1.熟练使用mapState 2.熟练使用mapGetters 3.熟练使用mapActions 4.熟练使用mapM ...

  4. vue第十四单元(认识单页面应用,理解vue-router的基本用法)

    第十四单元(认识单页面应用,理解vue-router的基本用法) #课程目标 1.了解单页应用与多页应用以及各自的优缺点 2.掌握路由如何实现单页应用 3.精通路由的基本语法 #知识点 #一.单页应用 ...

  5. vue第十二单元(vue中过渡效果的实现)

    第十二单元(vue中过渡效果的实现) #课程目标 熟练掌握transition组件的用法 熟练使用transition组件做过渡特效 熟练使用transition组件做动画特效 了解使用transit ...

  6. vue第十八单元(单向数据流 vuex状态管理)

    第十八单元(单向数据流 vuex状态管理) #课程目标 1.理解什么是数据管理模式 2.什么是vuex 3.什么时候使用vuex 4.vuex安装及工作原理 5.vuex语法 #知识点 1.首先来看下 ...

  7. Vue(十五)组件

    一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码 组件是自定义元素(对象) 2. 定义组件 ...

  8. vue学习(十五) 过滤器简单实用

    vue过滤器: 概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化.过滤器可以用在两个地方:插值表达式   v-bind表达式  由管道符指示 //过滤器调用时候的格式 {{ name ...

  9. linux基础-第十五单元 软件包的管理

    使用RPM安装及移除软件 什么是RPM rpm的文件名 rpm软件安装与移除工作中经常使用的选项 查看RPM软件包中的信息 查询已安装的软件包信息 RPM包的属性依赖性问题 什么是RPM包的属性依赖性 ...

随机推荐

  1. 关于Redis的一些思考

    1.从Java语言考虑,已经有ConcurrentHashMap等并发集合类了,与Redis相比,区别于差异在哪? 一直有这么个疑问,今天有搜了很久,很巧,搜到个有同样想法的问答,如下: When p ...

  2. 精尽MyBatis源码分析 - SQL执行过程(四)之延迟加载

    该系列文档是本人在学习 Mybatis 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释(Mybatis源码分析 GitHub 地址.Mybatis-Spring 源码分析 GitHub ...

  3. HarmonyOS Java UI之DependentLayout布局示例

    DependentLayout简介 DependentLayout意为相对位置布局,与DirectionalLayout相比较有更多的排布方式,每个组件可以指定相对于其他同级组件的位置,也可以指定相对 ...

  4. Java基础教程——二维数组

    二维数组 Java里的二维数组其实是数组的数组,即每个数组元素都是一个数组. 每个数组的长度不要求一致,但最好一致. // 同样有两种风格的定义方法 int[][] _arr21_推荐 = { { 1 ...

  5. 败家玩意儿!Redis 竟然浪费了这么多内存!

    作为内存数据库,内存空间大小对于 Redis 来说是至关重要的.内存越多,意味着存储的数据也会越多.但是不知道你有没有遇到过这样的情况,明明空间很大,但是内存的使用却不是很理想. 为什么会出现这样的情 ...

  6. 一道百度java面试题的多种解法

    下面是我在2018年10月11日二面百度的时候的一个问题: java程序,主进程需要等待多个子进程结束之后再执行后续的代码,有哪些方案可以实现? 这个需求其实我们在工作中经常会用到,比如用户下单一个产 ...

  7. CentOS下设置ipmi

    1.载入支持 ipmi 功能的系统模块 modprobe ipmi_msghandler modprobe ipmi_devintf modprobe ipmi_poweroff modprobe i ...

  8. 断点调试 breakpoints(修改request)

    目录 1.抓取信息 2.点击breakpoints勾选断点 3.复制抓取的信息 4.点击proxy再点断点设置 5.点击勾选然后add添加其下如图 6.点击确定 7.刷新百度,charles出现的页面 ...

  9. bootstrap 按钮颜色属性

    bootstrap 按钮颜色属性有几种

  10. 浅尝 Elastic Stack (五) Logstash + Beats + Kafka

    在 Elasticsearch.Kibana.Beats 安装 中讲到推荐架构: 本文基于 Logstash + Beats 读取 Spring Boot 日志 将其改为上述架构 如果没有安装 Kaf ...