vue3 项目搭建-9-通过 router 在跳转页面时传参

第一步，在跳转链接处挂载方法，将要传输的数据传入：

            <a href="#" @click.prevent="goToArticle(obj.id)" class="click"><h1>{{obj.title}}</h1><p>作者：{{obj.author}}</p><p>{{obj.summary}}</p><p id="views">浏览:{{obj.viewCounts}}</p></a>

第二步，导入 router，在方法中 push 参数到 router

import router from '@/router.js'const goToArticle = (articleId) => {router.push({ name: 'Article', params: { articleId } }); // 通过路由名称和参数进行跳转
};

第三步，在 router 中接受 push 的参数

const routes = [{path: '/',component: Layout,},{path: '/article/:articleId', // 使用 :articleId 定义路由参数name: 'Article',component: Article,}
];

第四步，需要参数的页面拿到参数

import { useRoute } from 'vue-router';const route = useRoute();
const articleId = route.params.articleId;
// 现在就可以使用articleId这个变量了，比如根据它去请求文章详情数据等
console.log('获取到的文章ID为：', articleId);