Vue3中路由跳转

原创已于 2022-09-02 10:46:20 修改 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-09-02 10:39:30 首次发布

页面遇到的基础问题同时被 2 个专栏收录

100 篇文章

订阅专栏

vue

90 篇文章

订阅专栏

本文介绍了在Vue.js应用中如何通过导航栏实现路由跳转。使用`<p v-for>`循环渲染导航数据，并在setup函数内定义路由对象。当点击导航项时，通过`gnClick`方法结合`useRouter`推送到指定路径。对于普通点击事件触发的页面切换，只需直接调用`gnClick`方法并传入目标路径即可。

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
    };