本文实例为大家分享了vue2.0实现选项卡导航效果的具体代码，供大家参考，具体内容如下
1：背景是一个web端的电商网站，根据点击的导航选项卡呈现不同得种类商品，首先这里说下我的路由结构是导航是一个组件，选项卡的内容又是单独的一个组件。
这是导航组件的内容，这里主要通过v-for循环生成导航，没什么好说的，需要注意的是，这因为选项卡需要知道用户所点击的是哪个模块，所以在数据中有个typeid属性，这里需要把该属性值传给选项卡组件。
这里用到的知识点
1：v-for循环实现导航的生成
2：在函数中如何得到当前点击元素的某个属性值
这里给每个li绑定了点击事件，该元素绑定的id值是我们所需要传给选项卡组件的，所以我们在绑定事件的时候需要在click函数中添加参数，注意看我这里绑定事件的时候是这样写的
点击事件是这样写的
现在参数传过去了，我们看下选项卡组件是怎么写的
当时就是这里，给我带来了一些困扰，一开始我是把获取数据的changedata方法写在了mounted钩子函数中，但是这样的后果是只有在首次路由跳转的时候才会起作用，再次点击导航的时候数据不会改变
why？因为mounted是创建组件页面元素挂载以后会走里面的方法~想一下，你再次点击的时候只会路由跳转，并不会重新创建组件，所以~
我在想怎么能每次点击导航路由跳转以后都重新走一次获取数据的changedata方法，我想了想，因为导航点击每次都会进行路由跳转，所以~我可以在watch里监听路由跳转，这样每次点击导航的时候都会触发监听方法，从而会调用changedata方法~~解决了不是~~上面的代码有具体的写法
最后说下如何监听路由
下篇文章说下watch的具体用法
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
