vue router全面详细知识点

_阿锋丶

于 2020-05-21 08:33:03 发布

阅读量5.9k

点赞数 29

分类专栏： vue

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_43342105/article/details/106248594

版权

vue 专栏收录该内容

44 篇文章

订阅专栏

本文详细介绍了Vue.js中的路由概念，包括前端路由的工作原理、Vue Router的安装与使用、动态路由、懒加载以及路由嵌套等高级特性。同时探讨了如何通过导航守卫控制页面跳转，以及keep-alive组件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

更多同步vue学习代码或者观看vue全家桶学习笔记请点击这里的，麻烦帮忙点个star

本片文章是自学b战coderwhy老师的自己写的笔记，如有侵权会马上删除

文章目录

认识路由
vue router基础
细节处理
路由的懒加载
- 效果
- 三种方法
路由嵌套
传递参数
导航守卫
- 为何使用导航守卫
- 使用导航守卫
keep-alive

认识路由

什么是路由

在这里插入图片描述

后断路由

在这里插入图片描述

前端路由

在这里插入图片描述

前端路由的规则

url的hash

在这里插入图片描述

HTML5的history模式

在这里插入图片描述

vue router基础

什么是vue router

在这里插入图片描述

安装和使用

在这里插入图片描述

如何创建一个router实例

在这里插入图片描述

挂载到vue实例中

在这里插入图片描述

具体使用router创建实例的过程

在这里插入图片描述

细节处理

路由的默认路径

在这里插入图片描述

设置HTML5的history模式

在这里插入图片描述

详解router-link

在这里插入图片描述

如和修改linkActiveClass

在这里插入图片描述

实现路由代码跳转

在这里插入图片描述

如何创建动态路由

在这里插入图片描述

路由的懒加载

在这里插入图片描述

效果

在这里插入图片描述

三种方法

在这里插入图片描述

路由嵌套

什么是路由嵌套

在这里插入图片描述

路由嵌套的实现步骤

在这里插入图片描述
在home路由的内部创建children属性

在home.vue

效果

嵌套路由的默认路径（重定向）

在这里插入图片描述

传递参数

准备工作

在这里插入图片描述

传递参数的方式

在这里插入图片描述

获取参数

在这里插入图片描述

$r o u t e r 和$ route的区别

在这里插入图片描述

导航守卫

为何使用导航守卫

在这里插入图片描述

使用导航守卫

在这里插入图片描述

keep-alive

在这里插入图片描述
更多同步vue学习代码或者观看vue全家桶学习笔记请点击这里的，麻烦帮忙点个star

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。