vue第十五单元(熟练使用vue-router插件)
第十五单元(熟练使用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插件)的更多相关文章
- vue第十六单元(element-ui vue-lazyload 等常用插件)
第十六单元(element-ui vue-lazyload 等常用插件) #课程目标 1.掌握插件的引入方式 2.精通UI框架 3.掌握前端常见的几种效果实现 #知识点 一.elementUI的使用 ...
- react第十五单元(react路由的封装,以及路由数据的提取)
第十五单元(react路由的封装,以及路由数据的提取) #课程目标 熟悉react路由组件及路由传参,封装路由组件能够处理路由表 对多级路由能够实现封装通用路由传递逻辑,实现多级路由的递归传参 对复杂 ...
- vue第十九单元(mapState mapMutations等方法的使用)
第十九单元(mapState mapMutations等方法的使用) #课程目标 1.熟练使用mapState 2.熟练使用mapGetters 3.熟练使用mapActions 4.熟练使用mapM ...
- vue第十四单元(认识单页面应用,理解vue-router的基本用法)
第十四单元(认识单页面应用,理解vue-router的基本用法) #课程目标 1.了解单页应用与多页应用以及各自的优缺点 2.掌握路由如何实现单页应用 3.精通路由的基本语法 #知识点 #一.单页应用 ...
- vue第十二单元(vue中过渡效果的实现)
第十二单元(vue中过渡效果的实现) #课程目标 熟练掌握transition组件的用法 熟练使用transition组件做过渡特效 熟练使用transition组件做动画特效 了解使用transit ...
- vue第十八单元(单向数据流 vuex状态管理)
第十八单元(单向数据流 vuex状态管理) #课程目标 1.理解什么是数据管理模式 2.什么是vuex 3.什么时候使用vuex 4.vuex安装及工作原理 5.vuex语法 #知识点 1.首先来看下 ...
- Vue(十五)组件
一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码 组件是自定义元素(对象) 2. 定义组件 ...
- vue学习(十五) 过滤器简单实用
vue过滤器: 概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化.过滤器可以用在两个地方:插值表达式 v-bind表达式 由管道符指示 //过滤器调用时候的格式 {{ name ...
- linux基础-第十五单元 软件包的管理
使用RPM安装及移除软件 什么是RPM rpm的文件名 rpm软件安装与移除工作中经常使用的选项 查看RPM软件包中的信息 查询已安装的软件包信息 RPM包的属性依赖性问题 什么是RPM包的属性依赖性 ...
随机推荐
- 关于Redis的一些思考
1.从Java语言考虑,已经有ConcurrentHashMap等并发集合类了,与Redis相比,区别于差异在哪? 一直有这么个疑问,今天有搜了很久,很巧,搜到个有同样想法的问答,如下: When p ...
- 精尽MyBatis源码分析 - SQL执行过程(四)之延迟加载
该系列文档是本人在学习 Mybatis 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释(Mybatis源码分析 GitHub 地址.Mybatis-Spring 源码分析 GitHub ...
- HarmonyOS Java UI之DependentLayout布局示例
DependentLayout简介 DependentLayout意为相对位置布局,与DirectionalLayout相比较有更多的排布方式,每个组件可以指定相对于其他同级组件的位置,也可以指定相对 ...
- Java基础教程——二维数组
二维数组 Java里的二维数组其实是数组的数组,即每个数组元素都是一个数组. 每个数组的长度不要求一致,但最好一致. // 同样有两种风格的定义方法 int[][] _arr21_推荐 = { { 1 ...
- 败家玩意儿!Redis 竟然浪费了这么多内存!
作为内存数据库,内存空间大小对于 Redis 来说是至关重要的.内存越多,意味着存储的数据也会越多.但是不知道你有没有遇到过这样的情况,明明空间很大,但是内存的使用却不是很理想. 为什么会出现这样的情 ...
- 一道百度java面试题的多种解法
下面是我在2018年10月11日二面百度的时候的一个问题: java程序,主进程需要等待多个子进程结束之后再执行后续的代码,有哪些方案可以实现? 这个需求其实我们在工作中经常会用到,比如用户下单一个产 ...
- CentOS下设置ipmi
1.载入支持 ipmi 功能的系统模块 modprobe ipmi_msghandler modprobe ipmi_devintf modprobe ipmi_poweroff modprobe i ...
- 断点调试 breakpoints(修改request)
目录 1.抓取信息 2.点击breakpoints勾选断点 3.复制抓取的信息 4.点击proxy再点断点设置 5.点击勾选然后add添加其下如图 6.点击确定 7.刷新百度,charles出现的页面 ...
- bootstrap 按钮颜色属性
bootstrap 按钮颜色属性有几种
- 浅尝 Elastic Stack (五) Logstash + Beats + Kafka
在 Elasticsearch.Kibana.Beats 安装 中讲到推荐架构: 本文基于 Logstash + Beats 读取 Spring Boot 日志 将其改为上述架构 如果没有安装 Kaf ...