Vue导航点击路由跳转后样式不变

<template><ul><li :class="{active:isActive==1}" @click="myOrder(1)">统计分析</li><li :class="{active:isActive==2}" @click="myOrder(2)">订单中心</li><li :class="{active:isActive==3}" @click="myOrder(3)">组织架构</li><li :class="{active:isActive==4}" @click="myOrder(4)">审核设置</li></ul>
</template>
<script>export default{data(){return{isActive: 0,}},mounted(){if(this.$route.query.item){this.isActive = this.$route.query.item;}else{this.isActive = 0;}},methods:{myOrder(i){this.isActive = i;if(i == 1){this.$router.replace({path:'/'+ this.route_url + '/personal',query: {item: i,}})}else if(i == 2){this.$router.replace({path:'/'+ this.route_url + '/ordercenter',query: {item: i,}})}else if(i == 3){this.$router.replace({path:'/'+ this.route_url + '/framework',query: {item: i,}})}else if(i == 4){this.$router.replace({path:'/'+ this.route_url + '/purchase',query: {item: i,}})}}, mounted(){if(this.$route.query.item){this.isActive = this.$route.query.item;}else{this.isActive = 0;}},methods:{myOrder(i){this.isActive = i;if(i == 1){this.$router.replace({path:'/'+ this.route_url + '/personal',query: {item: i,}})}else if(i == 2){this.$router.replace({path:'/'+ this.route_url + '/ordercenter',query: {item: i,}})}else if(i == 3){this.$router.replace({path:'/'+ this.route_url + '/framework',query: {item: i,}})}else if(i == 4){this.$router.replace({path:'/'+ this.route_url + '/purchase',query: {item: i,}})}},}
</script>
<style>li{width: 56px;height: 64px;margin-left: 48px;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #FFFFFF;line-height: 64px;cursor: pointer;border-bottom: 2px solid transparent;}.active{border-bottom: 2px solid #FFFFFF;}
</style>

Vue导航点击路由跳转后样式不变相关推荐

解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部在我们写路 ...
vue二级路由跳转后外部引入js失效问题解决方案
vue二级路由跳转后外部引入js失效问题解决方案参考文章: (1)vue二级路由跳转后外部引入js失效问题解决方案 (2)https://www.cnblogs.com/LittleT/p/9077 ...
VUE路由跳转后自动刷新一次页面
VUE路由跳转后自动刷新一次页面我们在前端开发时有时会遇到一些问题,暂时找不到解决办法只有靠刷新才能救一下.可是又不能每次都手动刷新.在网上找了很久的自动刷新办法,发现大部分都是路由跳转类的刷新,和 ...
vue点击菜单跳转时，背景颜色动态变化
** vue点击菜单跳转时,背景颜色动态变化 ** html: script: export default { name: "menu", data() { return { a ...
vue中实现路由跳转的三种方式（超详细整理）
vue中实现路由跳转的三种方式一.使用vue-router vue-router 本质是一个第三方的包用的时候需要下载步骤 (7步法 ): 下载vue-router模块到当前工程 yarn ad ...
解决 VUE 微信 IOS 路由跳转问题
解决 VUE 微信 IOS 路由跳转问题参考文章: (1)解决 VUE 微信 IOS 路由跳转问题 (2)https://www.cnblogs.com/taoquns/p/9713846.html ...
vue路由跳转后，刷新指定页面。
做项目遇到一个坑:A页面带参跳转到B页面,第二次跳转时的参数与第一次时的参数不同,但是后台查询时还是使用的第一次的参数.需要手动刷新之后,才会使用第二次参数. 鉴于时间原因直接使用刷新页面监听路由的方 ...
vue中的路由跳转和传参
一:注意:在 Vue 实例中,你可以通过 $router 访问路由实例.因此你可以调用 this.$router.push("路由地址")来跳转到目标路由页面: 想要导航到不同的 ...
vue实现登录路由跳转到成功页面
一. 效果 1.未登陆之前 2.登录界面 3.登录之后路由跳转二.需求分析要求: 使用vue-cli搭建创建项目密码输入框有两个功能,当用户输入时候如果坚持caps lock处于开启状态. ...

Vue导航点击路由跳转后样式不变

Vue导航点击路由跳转后样式不变

Vue导航点击路由跳转后样式不变相关推荐

最新文章

热门文章