vue技术栈进阶（03.路由进阶）

路由参数传参

1）布尔值的方式

路由文件中设置属性
在这里插入图片描述
2）对象的方式
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200416183402444.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70)

3）函数的方式

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200416183549270.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg,size_16,color_FFFFFF,t_70)
然后在组件中接收
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200416184004878.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg,size_16,color_FFFFFF,t_70)

HTML5 History 模式

在这里插入图片描述
未找到的页面处理
在这里插入图片描述

导航守卫

*全局守卫

1）全局前置守卫：在开始跳转和跳转完成前执行
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200416184426492.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70)
2）全局后置钩子：在跳转完成之后执行
在这里插入图片描述

*路由独享 守卫：在跳转完成之前

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200416200948175.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70)

*组件 守卫：

渲染组件之前
在这里插入图片描述
离开之前
在这里插入图片描述
组件复用时： 就是再次访问此页面，传递不同的参数是调用
在这里插入图片描述

导航解析全过程

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200416203554115.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70)

路由元信息（每个相关这个路由元素的信息）

定义在路由列表中
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200416204807687.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg,size_16,color_FFFFFF,t_70)
定义一个处理业务逻辑的函数 ，在lib/util中存放根业务逻辑相关的函数
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200416204946555.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg,size_16,color_FFFFFF,t_70)
主路由文件中引入函数，并且在全局路由守卫中进行调用
在这里插入图片描述
在这里插入图片描述

过渡效果（在根组件中设置）

页面加载和页面离开时的效果（即组件加载和组件销毁的效果）
![在这里插入图片描述]( https://img-blog.csdnimg.cn/2020041621045128.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg,size_16,color_FFFFFF,t_70)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200416211245139.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg,size_16,color_FFFFFF,t_70)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200416211713847.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70)

posted @ 2020-04-16 21:19  jacksonni  阅读(232)  评论(0)    收藏  举报