49-Vue路由基本配置

这里自定义路由切换的标签和标签样式,设置切换动画,以及默认页面的显示组件

效果图.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