学无先后,达者为师

网站首页 Vue 正文

vue导航栏点击变色(刷新不变色)

作者:周朝兵 更新时间: 2022-03-14 Vue

效果图
在这里插入图片描述
导航栏代码:

<template>
  <div>
    <div class="nav">
      <div class="nav_cen" ref="navs">
        <span @click="Navigation(item.name)" :class="jobs == item.name ? 'nav_text' : ''" v-for="(item,i) in navigation"><router-link :to="item.attribute">{{ item.titele }}</router-link></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items:"",
      navigation:[
        {
          id:1,
          titele:"了解新区",
          attribute:"/understand",
          name:"Nnderstand",
        },
        {
          id:2,
          titele:"招聘论坛",
          attribute:"/forum",
          name:"Forum",
        },
      ],
      jobs: 'Nnderstand', 
    }
  },
  mounted(){
    if(this.$route.name){
      this.jobs = this.$route.name;
    }else{
      this.jobs = "";
    }
  },
  methods:{
    Navigation (title) { 
      this.jobs = title 
    } 
  }
}

</script>

路由代码:

{
        path: "/understand",
        name: "Nnderstand",
        component: () => import("../views/understand/understand"),
        meta: {
          title: "了解新区",
        },
      },
      {
        path: "/forum",
        name: "Forum",
        component: () => import("../views/forum/forum"),
        meta: {
          title: "招聘论坛",
        },
      },

原文链接:https://blog.csdn.net/m0_45251955/article/details/122122571

栏目分类
最近更新