十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
前言: 在项目中,我用到了vue +iview + vue-router 开发; 然后导航条就使用了iview的Menu组件,结果发觉导航条的内容点击一次之后不会显示高亮样式,而是先跳转了,我再点击一次,才会高亮显示。
成都创新互联公司成立于2013年,先为泗阳等服务建站,泗阳等地企业,进行企业商务咨询服务。为泗阳企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。在看了vue-router的文档之后,发觉有一个很好用的东西,就是router-link的属性: active-class 和 exact。
为什么要使用router-link? 官网上说明了这几点好处:
组件支持用户在具有路由功能的应用中(点击)导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的 a 标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。
比起写死的 会好一些,理由如下:
无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9 降级使用 hash 模式,无须作任何变动。
在 HTML5 history 模式下,router-link 会守卫点击事件,让浏览器不再重新加载页面。
当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写(基路径)了。
首先, active-class可以指定一个高亮时的样式, 比如我定义一个白色粗体的样式:
color: #fff; font-weight: bold; }