您的位置:首页 > 教育 > 锐评 > 全球热点app下载_国内永久免费crm代码_长春疫情最新消息_百度提交工具

全球热点app下载_国内永久免费crm代码_长春疫情最新消息_百度提交工具

2025/2/24 23:21:25 来源:https://blog.csdn.net/m0_75138009/article/details/144315865  浏览:    关键词:全球热点app下载_国内永久免费crm代码_长春疫情最新消息_百度提交工具
全球热点app下载_国内永久免费crm代码_长春疫情最新消息_百度提交工具

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

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com