router-link点击切换高亮

使用router-link可以通过设置active-class属性来实现路由切换时对应文字高亮的效果。在router-link标签上添加active-class属性，并为其指定一个class名，然后在样式表中设置该class名的样式，即可实现高亮效果。

例如，在HTML代码中：

<ul>
  <li>
    <router-link to="/films" active-class="liuliufilms">电影</router-link>
  </li>
  <li>
    <router-link to="cinemas" active-class="liuliufilms">影院</router-link>
  </li>
  <li>
    <router-link to="active" active-class="liuliufilms">票价</router-link>
  </li>
  <li>
    <router-link to="center" active-class="liuliufilms">我的</router-link>
  </li>
</ul>

然后在样式表中添加对应的样式：

.liuliufilms {
  color: red;
  /* 设置高亮的样式 */
  text-decoration: underline;
}

这样，在点击对应的路由链接时，该链接的文字就会显示高亮效果。

相关问题

<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`时，个人用户注册将不再高亮，而企业用户注册将会高亮。

请使用vue路由相关知识动手实现Tab栏切换素例。在这里用单页面构建完成此项题目。 要求：使用路由在页面显示待付款、待发货、待收货三个功能，其中待付款中嵌套子路由(商品1和商品2两 个子路由），并设置相应样式和高亮效果。 附件可以下载nie. js和VueRouter. js

好的，我会根据您的要求进行回答。首先，需要安装Vue.js和Vue Router，您可以使用npm或yarn进行安装。接下来，您可以使用以下代码来实现Tab栏切换：

<div id="app">
  <router-link to="/pending-payment" class="tab-link">待付款</router-link>
  <router-link to="/pending-shipping" class="tab-link">待发货</router-link>
  <router-link to="/pending-receipt" class="tab-link">待收货</router-link>

  <router-view></router-view>
</div>

const router = new VueRouter({
  routes: [
    {
      path: '/pending-payment',
      component: {
        template: `
          <div>
            <h2>待付款</h2>
            <router-link to="/pending-payment/product1">商品1</router-link>
            <router-link to="/pending-payment/product2">商品2</router-link>
            <router-view></router-view>
          </div>
        `
      },
      children: [
        {
          path: 'product1',
          component: {
            template: `
              <div>
                <h3>商品1</h3>
                <p>价格：100元</p>
              </div>
            `
          }
        },
        {
          path: 'product2',
          component: {
            template: `
              <div>
                <h3>商品2</h3>
                <p>价格：200元</p>
              </div>
            `
          }
        }
      ]
    },
    {
      path: '/pending-shipping',
      component: {
        template: '<h2>待发货</h2>'
      }
    },
    {
      path: '/pending-receipt',
      component: {
        template: '<h2>待收货</h2>'
      }
    }
  ]
})

new Vue({
  el: '#app',
  router
})

在上面的代码中，我们使用了Vue Router的路由功能来实现Tab栏切换。使用`<router-link>`组件来定义链接，使用`<router-view>`组件来渲染匹配到的组件。子路由可以通过`children`属性来定义。在待付款路由中，使用了嵌套路由来实现商品列表的显示。样式和高亮效果可以通过CSS进行实现。