使用vue脚手架，点击导航切换不同路由且给导航切换样式，发现点击样式存在冲突（解决办法）

项目场景：

html:

 <ul class="tsmenu">

                <router-link to="/">

                <li :class="{yuanshi:yuanshi}" @click="dianji">商城</li>

                </router-link>

               <li :class="{yuanshi:yuanshi1}" @click="dianji1">资讯</li>

                <li :class="{yuanshi:yuanshi2}" @click="dianji2">植物库</li>

                <li :class="{yuanshi:yuanshi3}" @click="dianji3">商圈</li>

        </ul>

script:

methods: {

        dianji(){

            this.yuanshi=true,

            this.yuanshi1=false,

            this.yuanshi2=false,

            this.yuanshi3=false

        },

        dianji1(){

            this.yuanshi1=true,

            this.yuanshi=false,

            this.yuanshi2=false,

            this.yuanshi3=false

        },

        dianji2(){

            this.yuanshi2=true,

            this.yuanshi1=false,

            this.yuanshi=false,

            this.yuanshi3=false

            this.$router.push('/zhiwuku');

        },

        dianji3(){

            this.yuanshi3=true,

            this.yuanshi1=false,

            this.yuanshi2=false,

            this.yuanshi=false

        }

    },

---

问题描述：

 点击导航 植物库 后发现router已跳转，但点击事件样式未改变

---

原因分析：

点击事件切换样式和router-link触发时会有冲突

---

解决方案：

    mounted(){

        if(this.$route.path=='/zhiwuku'){

            this.yuanshi2=true;

            this.yuanshi=false;

        };

    }