这里自定义路由切换的标签和标签样式,设置切换动画,以及默认页面的显示组件
效果图.gif
https://router.vuejs.org/zh/api/#active-class
一.设置默认显示的组件
-
在定义路由的时候这只路由重定向,将默认页面的地址,重定向到指定的默认哈希地址
image.png
二.自定义跳转标签和样式
给router-link设置tag="标签名称"
-
查阅浏览器解析结果,默认点击属性类为.router-link-active
image.png 在路由对象中通过lindActiveClass自定义激活类名称
-
通过自定义的激活类名称设置点击效果
image.png
image.png
三.添加切换动画
- transition标签包裹路由出口router-view
- 在style中设置动画
-
在transition中添加mode属性设置切换为先出后入
image.png
image.png
