技巧2.0 嵌套组件router.push传参跳转的路由如何切换导航选中状态

最新推荐文章于 2024-09-08 13:32:33 发布

luanmabug

最新推荐文章于 2024-09-08 13:32:33 发布

阅读量758

点赞数

分类专栏： # vue3项目技巧文章标签： css 切换导航状态嵌套组件 js vue3

本文链接：https://blog.youkuaiyun.com/yangyangdt/article/details/122342651

版权

#vuecli技巧2.0 嵌套组件router.push传参跳转的路由如何切换导航选中状态

来源：vue3demo1里goodlist.vue和gooddetail.vue

效果图示:

初始页面：

点击导航项：

需求：切换导航，导航样式的选中和不选中状态。

router-link

如果导航是用router-link写的，请看链接

router-push

如果路由是由router-push跳转的，那么怎么添加选中状态呢?

<!-- 路由跳转 第二种方式 router.push -->
	<ul>
		<li v-for="item,index in goodslist" @click="todetails(item.id)">
			{
  { item.name }}
		</li>
	</ul>
<script>
methods:{
    
		todetails(id){
    
			 this.$router.push({
     path:'/goodslist/goodsdetail/'+id})
		}  
	  }
</script>

第一种方式：js方式，利用v-if判断添加

在鼠标点击时，进入点击事件，记录下点击的是哪个id, 因为router.push给带了一个参数过来，再和li中的id比较，和哪个li的id一样了，就给哪个项添加样式即可。

<template>
	<h2>商品列表页面</h2>
	
	<ul>
		<!-- 选中状态第一步：为导航建立css   class="goodactive" 取决于给哪个li加上class-->
		<li  v-for="item,index in goodslist" @click="todetails(item.id)