Vue3中路由跳转

1.如果是导航栏路由跳转  且导航数据循环放在了setup里面，那么需要在数据里面添加路由地址

 <p v-for="item in listData" :key="item.id" @click="gnClick(item)">{{ item.name }}</p>

import { useRouter } from "vue-router";

setup() {
    const listData = [
      {
        id: 1,
        name: "需求中心",
        path:"",
      },
      {
        id: 2,
        name: "成果中心",
        path:"/AchieveMents"
      },
      {
        id: 3,
        name: "互助交流",
        path:"",
      },
      {
        id: 4,
        name: "专利中心",
        path:"/patented",
      },
      {
        id: 5,
        name: "专家资源库",
      },
      {
        id: 6,
        name: "新闻中心",
        path:"/newsCenter",
      },
      {
        id: 7,
        name: "中心介绍",
        path:"",
      },
    ];
    const router = useRouter();
    function gnClick(item) {
    router.push({
    path: item.path
  });
}
    return {
      listData,
      useRouter,
      gnClick
    };
  },

2.普通的点击即可切换到别的页面，那么直接这样写一个方法即可

@click="gnClick()"

import { useRouter } from "vue-router";


const router = useRouter();
function gnClick() {
      router.push({ path: "/newsDetail" });
    }


return {
      gnClick
    };