vue写footer导航,点击哪个让哪个变色并路由跳转(router-link-active的作用)。
如上图所示,创建了4个路由跳转选项。
当我切换“首页” “啦啦” “发现”“我的”四个路由选项时,文字和icon由黑色变成红色。
下图为布局(html):
router-link: 其中tag='div’表示router-link为div标签
CSS:
router-link-active是vue自带属性,表示router-link激活选中时的状态,可实现切换变色。
以上就完成了这个功能的需求啦!是不是很简单.
但是对router-link-active的认识还不是很深,没关系,下面就详细说说它的作用:
组件支持用户在具有路由功能的应用中(点击)导航。
通过 to 属性指定目标地址,默认渲染成带有正确链接的 标签.
可以通过配置 tag 属性生成别的标签.。
另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名,就是router-link-active,我们就可在a标签被点击时,给a标签添加颜色或背景
如果你觉得router-link-active这个名字过长时,你可以在main.js中,
let router=new VueRouter({
router-link-active:’active’
})
路由重定向:
以上都设置好后基本大功告成,但是由于根路径设置的如下图,
这样的话就无法激活index路径,所以刚进入根路径也就没有让“首页”导航变成红色,所以这里就要用到路由重定向(redirect)了。
将根路径的路由重新定向,如下图:
定向到/index路径,就能一进首页成功激活首页路径即让“首页”导航变红。