vue router-link中选中路由设置样式

在vue中用css就可以给router-link设置样式.router-link-active{…}但有时候需要动态地修改就需要给每个router-link一个标识，当他激活的时候绑定一个内联样式&amp;lt;template&amp;gt;&amp;lt;div class=&quot;tabberWarp&qu

ajzzz

7515人浏览 · 2019-03-05 14:43:41

ajzzz · 2019-03-05 14:43:41 发布

在页面中定义好需要的样式和类名

  .router-link-active{
   ...
   }

然后在routes.js页面new路由对象的时候加入写好的类名即可

  let routerInstance = new Router({
  		//配置激活时要使用的类名	
	    linkActiveClass:'router-link-active',
	    mode: 'history',
	    waitForData: true,
	    transitionOnLoad: true,
	    base: basePath,
	    routes: []
	    })

不同页面只要在各自的 .router-link-active里面设置好自己需要的样式就可以了

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^