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

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

文章目录

认识路由

什么是路由

在这里插入图片描述

后断路由

在这里插入图片描述

前端路由

在这里插入图片描述

前端路由的规则

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 和 router和 router和route的区别

在这里插入图片描述

导航守卫

为何使用导航守卫

在这里插入图片描述

使用导航守卫

在这里插入图片描述
在这里插入图片描述

keep-alive

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

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue