学习Vue(4)

路由

实现的是SPA应用,单页面应用
vue-router4用于vue3
vue-router3用于vue2

简介

在这里插入图片描述

基本使用

main.js
在这里插入图片描述

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

模式设置

在这里插入图片描述

注意点

在这里插入图片描述

组件

一般组件

自己写上去的组件

路由组件

使用router跳转展示的组件

多级路由

注意children里不加斜杠
在这里插入图片描述

总结

在这里插入图片描述

路由传参

?后面才是参数
在这里插入图片描述
这样来的
在这里插入图片描述

在这里插入图片描述

参数传参

在这里插入图片描述

query

在这里插入图片描述

总结

在这里插入图片描述

params参数

在这里插入图片描述
在这里插入图片描述
这里只能用name,用path就要报错。
在这里插入图片描述

总结

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

命名路由

在这里插入图片描述

在这里插入图片描述

总结

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

props

对象写法

用得不多,si数据

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

设为true

在这里插入图片描述

props为函数

在这里插入图片描述
解构赋值

在这里插入图片描述
连续解构赋值
在这里插入图片描述

按钮实现跳转和前进后退

调用this.router上的方法

在这里插入图片描述

独有的生命钩子

activated()

组件被激活,时调用

deactivated()

组件失活了时被调用

路由守卫

前置路由守卫

在这里插入图片描述

后置路由守卫

可以设置title
在这里插入图片描述

独享路由守卫

只有前置
在这里插入图片描述

通过路由规则

用得不多

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

两种mode

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值