vue3如何实现路由传参

效果：

 代码：

header.vue

 <div class="navMain">
        <ul>
          <li
            v-for="item in resultList"
            :key="item.id"
            @click="gnClick(item)"
            :class="route.path.includes(item.path) ? 'activeli' : ''"
          >
            <span v-if="!item.child">{{ item.name }}</span>
            <el-dropdown v-else>
              <span class="el-dropdown-link">
                {{ item.name }}
                <el-icon class="el-icon--right navIcon">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="item in item.child"
                    :key="item.id"
                    @click="gnClick(item)"
                    >{{ item.name }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </li>
        </ul>
      </div>

    function gnClick(item) {
      router.push({
        path: item.path,
        query:{name:item.name} 
      });
    }

 news页面：

 const route = useRoute();    
watch(() => route.query,(newQuery, oldQuery) => {
        Name.value = newQuery.name;
         newsData.forEach((item) => {
        if (item.barName == Name.value) {
          newsItem.value = item.info;
        }
      });
	    },{ immediate: true });

 

 注意：

 router.push({

            //传递参数使用params的话，只能使用name指定(在route.js里面声明name)

            name:"B",

            params:{

                num:1

            }

            /* 使用query的话，指定path或者name都行

            path:'/home',

            query:{

            num:1

            } */

            })