您当前的位置：学无止境 > 在vue3.0中router-link中的tag属性被移出，不能修改认标签的解决方法网站首页学无止境

在vue3.0中router-link中的tag属性被移出，不能修改认标签的解决方法

发布时间：2022-12-30 10:09:53编辑：请禾查看次数：1557

在vue3.0中< router-link / >中的tag属性被移出，不能修改< router-link >的默

认标签，但是vue3.0中给我们提供了 custom 配置 ,不通过tag属性修改，直接嵌套

< router-link > 中，又会出现一个问题,原标签的 to 属性失效，vue提供 v-slot 插槽 暴露底层的制定能力 navigate 是解析后的规范地址 放在我们的v-slot中

最后配合 @click=“navigate” 实现了页面跳转

exact active class 给当前页面路由对应的< router-link/ > 跳转的地址精准一直就添加一个calss类名，这个属性在vue3.0被废弃，但是 v-slot 中暴露的 isExactActive 为true填

<ul class="nav">
		<router-link to="/" custom v-slot="{ navigate,isExactActive }">
			<li @click="navigate" @keypress.enter="navigate" role="link" :class="{active:isExactActive}">首页</li>
			
		</router-link>
		<router-link to="/goods" custom v-slot="{ navigate,isExactActive }">
			<li @click="navigate" @keypress.enter="navigate" role="link" :class="{active:isExactActive}">商品</li>
			
		</router-link>
		<router-link to="/user" custom v-slot="{ navigate,isExactActive }">
			<li @click="navigate" @keypress.enter="navigate" role="link" :class="{active:isExactActive}">用户中心</li>
			
		</router-link>
	</ul>



版权声明：本文为CSDN博主「请禾」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_53676368/article/details/117605197