美文网首页
2020-05-15 Vue中路由设置路由高亮,

2020-05-15 Vue中路由设置路由高亮,

作者: 流泪手心_521 | 来源:发表于2020-05-15 11:10 被阅读0次

linkActiveClass

类型: string

默认值: "router-link-active"

全局配置 <router-link> 默认的激活的 class。
通过 默认vue-router提供的类名 router-link-active 设置选中路由高亮的两种方式
1.结构

<ul class="nav-left">
                <router-link :to='{name: "home"}' tag="li" exact>首页</router-link>
                <router-link :to='{name: "know"}' tag="li" exact>知识</router-link>
                <router-link :to='{name: "askAnswer"}' tag="li" exact>问答</router-link>
                <router-link :to='{name: "expert"}' tag="li" exact>专家</router-link>
            </ul>

2.样式

 li.router-link-active{
          border-bottom: 2px solid #ff8635;
 }

第二个问题,路由跳转,假如没有一级路由,二级路由就是一级路由,直接配一级路由就可以了

相关文章

  • 2020-05-15 Vue中路由设置路由高亮,

    linkActiveClass 类型: string 默认值: "router-link-active" 全局配置...

  • Vue2门户项目 | 开发过程记录

    本文目录: 1.自动生成的环境变量 2.vue-cli的版本升级 3.路由高亮丢失问题 4.设置全局路由守卫拦截非...

  • Vue.js路由

    1.设置路由 ① 路由map 在main.js中导入vue-router 设置全局路由 实例化router ②路由...

  • vue-router @4.x 和 @3.x 对比

    1. 创建实例 2. 路由重定向 vue2.x使用路由选项redirect设置路由自动调整,vue3.x中移除了这...

  • 路由

    路由用来管理不同页面间关系和跳转,我们可以自己配置,这种功能就是路由。路由的本质是hash值,vue 中的路由设置...

  • vue 路由高亮

    我在做项目中,经常使用路由高亮,目前为止我学会了两种 1,采用 路由 linkActiveClass 的属性, 1...

  • vue路由高亮

    在路由配置页面routes的同级添加 linkActiveClass: "myActive" 再在vue组件里...

  • Vue中路由设置路由高亮的两种方式

    根据Vue Router官方API文档我们可以通过以下两种方式去设置路由高亮 active-class 类型:st...

  • Vue 基础 - 前端路由

    使用vue-router实现前端路由 安装vue-router: 配置路由文件,并在vue实例中导入: 设置视图(...

  • vue-router学习总结

    1.引入vue-router npm install vue-router --save 2.设置路由(1)路由实...

网友评论

      本文标题:2020-05-15 Vue中路由设置路由高亮,

      本文链接:https://www.haomeiwen.com/subject/ttaqohtx.html