最近用 vue 捣鼓东西,其中用到还用到 materialize 这个 md 框架
不过 materialize tabs 组件在 vue 中不能很好工作......
原因是 tabs 组件是通过href
锚点标记,来匹配 tab 主体元素,例如官方文档中例子
<ul class="tabs">
<li class="tab col s3"><a href="#test1">Test 1</a></li>
</ul>
<div id="test1" class="col s12">Test 1</div>
假如你还开启了 vue 的 router
这样当你点击 a 标签时,由于 router 的路径被锚点改变而导致页面错乱
修复这个问题也很简单,因为只要不使用href
就可以了,
我们完全可以用data-href
自定义属性来替代,这样就不会因为锚点干扰 router 路径
同时将 tabs 组件源码的中关于获取href
的值的语句替换为获取data-href
,就好了。
像这样
this.hash
=>$(this).data('href')
希望能帮到你们