<div class="selectRole1 leftfix"><router-link active-class="active" :to="{ name: 'personal' }">个人用户注册</router-link></div> <div class="selectRole2 leftfix"><router-link active-class="active" :to="{ name: 'enterprise' }">企业用户注册</router-link></div>如何在vue3中默认设置个人用户为高亮，点击企业用户注册时高亮变更

您可以在`selectRole1`中加入`class`来设置默认高亮样式，如下所示：

<div class="selectRole1 leftfix active"><router-link active-class="active" :to="{ name: 'personal' }">个人用户注册</router-link></div>
<div class="selectRole2 leftfix"><router-link active-class="active" :to="{ name: 'enterprise' }">企业用户注册</router-link></div>

然后，在`selectRole2`中加入点击事件，当被点击时，移除`selectRole1`的高亮样式，添加到`selectRole2`上，如下所示：

<div class="selectRole1 leftfix active"><router-link active-class="active" :to="{ name: 'personal' }">个人用户注册</router-link></div>
<div class="selectRole2 leftfix" @click="setActive"><router-link active-class="active" :to="{ name: 'enterprise' }">企业用户注册</router-link></div>

在Vue组件中，添加`setActive`方法来切换高亮样式：

export default {
  methods: {
    setActive() {
      document.querySelector('.selectRole1').classList.remove('active');
      document.querySelector('.selectRole2').classList.add('active');
    }
  }
}

这样，当您点击`selectRole2`时，个人用户注册将不再高亮，而企业用户注册将会高亮。