当前位置：首页 > article >正文

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

article 2025/1/23 22:31:28

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

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

查看全文

http://www.kler.cn/a/428500.html