router-link active-class属性实现路由切换对应文字高亮，点击文字跳转对应路由文字高亮 tag属性

liuhongboke

已于 2022-07-25 17:55:09 修改

阅读量2k

点赞数 1

分类专栏： vue实战文章标签：前端 javascript 开发语言

于 2022-07-25 16:51:48 首次发布

本文链接：https://blog.csdn.net/liuhongboke/article/details/125977672

版权

本文介绍了如何使用Vue.js的`router-link`组件结合`active-class`属性来实现在路由切换时对应文字的高亮显示。通过设置`tag`属性可以指定被渲染的元素，并在Vue 4中调整为`isActive`属性来判断链接是否选中，以避免黄色警告提示。同时，文章提供了相关代码示例和最终效果展示。

摘要由CSDN通过智能技术生成

BOM中的方法，监听路径改变
在这里插入图片描述
控制台试验：

接下来是代码实现部分：
films, cinemas…几个页面如下图：

<template>
    <div>
        films页面
    </div>
</template>

App页面：

<template>
    <div id='app'>
               <!-- 跳转路径对应文字高亮（点击高亮） 需监听路由-->
		  <ul>
		          <li>
			        <router-link to="/films">电影</router-link>
			      </li>
			      <li>
			        <router-link to="cinemas">影院</router-link>
			      </li>
			      <li>
			        <router-link to="active">票价</router-link>
			      </li>
			      <li>