美文网首页dc平台部技术分享
路由跳转,样式绑定

路由跳转,样式绑定

作者: 局外人12 | 来源:发表于2017-12-18 16:17 被阅读42次

    路由跳转的时候我们就不可以用切换的形式来改变点击标签的样式了,因为当页面刷新,会回到初始值,而页面和标签的样式就对应不上。解决方法如下:

    方式一:使用active-class属性

    这个属性是设置激活链接时class属性,也就是当前页面所有与当前地址所匹配的的链接都会被添加上class属性。exact标签:开启router-link的严格模式。

    active-class属性的使用

    方式二:使用路由传参方式

    在点击a标签的时候,就将遍历的索引值传递过去,通过索引值来辨别每个页面,即使刷新页面,标记还在,不会回到初始值。

    路由传参方式

    方式三:通过vuex实现

    1、安装vuex:cnpm install vuex --save

    2、在src目录下创建store文件夹

    3、在main.js文件中引入store文件:

    import store from‘./store’

    new Vue({store })

    4、在store文件夹中创建index.js文件,在文件中引入vuex:

    5、在isShow.js中设定vuex的状态(State、Getter、Mutation、Action)。在State中定义需要使用的参数并设定初始值,getter的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,更改Vuex的store中的状态的唯一方法是提交mutation,Action类似于mutation,不同在于Action提交的是mutation,而不是直接变更状态。我们可以通过this.$store.commit(mutation类型,{state中定义的参数:需要改变的值})来改变参数值。

    调用 store.commit 方法

    相关文章

      网友评论

        本文标题:路由跳转,样式绑定

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