vue3如何实现路由传参

路由传参"/>

vue3如何实现路由传参

效果：

 代码：

header.vue

 <div class="navMain"><ul><liv-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-itemv-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

            } */

            })