router-link-active类的作用: router-link-active类是一个由Vue Router自动添加的类名,用于标记当前激活的路由链接。 当一个<router-link>元素对应的路由被激活时,Vue Router会自动为该元素添加router-link-active类。 官方文档说明: Vue Router的官方文档对router-link-active类有详细的描述。根据Vue Rou...
注意:被选中的router-link将自动添加一个class属性值.router-link-active。 代码语言:javascript 复制 <router-link to="/">[text]</router-link> to:导航路径,要填写的是你在router/index.js文件里配置的path值,如果要导航到默认首页,只需要写成 to=”/” , [text] :就是我们要显示给用户的导航名称。 2....
linkActiveClass:配置激活状态下的链接样式类名; scrollBehavior:配置页面切换时的滚动行为。 以下是一个使用Vue router的简单示例: // main.js import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'home'...
1.导航链接:vue-router提供了一个全局组件router-link,取代a标签 (1)能跳转,配置to属性,to属性不需要加# ,本质还是a标签 (2)能高亮,默认会提供高亮类名 .router-link-active(模糊匹配)router-link-exact-active(精确匹配) <router-link to="/find">更多音乐</router-link> <router-link to="/my">我的...
router-link-active 表示当前路由被激活的时候,添加的属性 在第一个'/'添加exact之后,默认是false,发现,在点击子路由的时候,被激活的’资料设置‘这个路由存在router-link-active属性,所以把router-link-exact-active改为router-link-active 解决了这个样式的问题。
exact><a>HOME</a></router-link> <router-link class="bg-success" tag="li" active-class="active" to="/user/1"><a>user1</a></router-link> <router-link class="bg-success" tag="li" active-class="active" to="/user/2"><a>user2</a></router-link> </ul> </div> </template...
1、先看router中的index.js文件 1、先看router中的index.js文件 import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' import Register from '../views/main/Register' import Login from '@/views/main/Login' ...
--省略样式代码-->.footer_wrapa.router-link-active{background-color:purple;}</style> 在这里插入图片描述 <router-link>默认会添加两个CSS类名来表示链接的激活状态: .router-link-exact-active通常在,精确匹配整个路径时添加; .router-link-active会在链接对应的路由被激活时添加,适用于模糊匹配、设置高亮;...
active是活跃的意思,router-link-active可以理解为当前活跃的路由 因此我们就可以利用这个路由来让我们切换路由的tabBar能高亮显示 之前的示例在切换路由时,底部的tabBar都没有任何变化.现在可以尝试修改一下 通过router-link-active类名定义当前路由的样式 .router-link-active{color:red;font-weight:bolder;} ...
}; },methods: {},computed: {}, };</script><stylescoped>/* 去除router-link的下划线 *//* .router-link-active { text-decoration: none; } */@import"../../assets/css/base.css";</style> 3、实现的效果