Vue 项目总结（3）--- 通过路由传参、获取相应文章信息

最新推荐文章于 2024-08-20 09:06:10 发布
最新推荐文章于 2024-08-20 09:06:10 发布
阅读量399 收藏 1
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dwyane1279/article/details/121322663
版权
本文总结了Vue项目中如何通过路由传递文章ID，进入文章详情页并根据ID请求相应文章信息。步骤包括：1) 传递文章id；2) 配置路由；3) 在详情页获取URL中的ID。后续将继续探讨路由相关知识。
摘要由CSDN通过智能技术生成

  项目中，在有许多文章的页面点击某一篇之后，需要进入到某一文章的详情页面，如下图。

  实现方法：

  通过路由传递文章的ID,在文章详情页获取url中的id发起请求，获取相应文章。

  1：传递文章id

 

  2：在index.js中进行路由配置

3：在文章详情页面获取url中的id

  成功！

  后续会有进一步关于路由的学习总结

安小蒋
关注
vue中从后台渲染文章列表及根据id跳转文章详情
sandy_star
12-12 2811
前言：vue里面怎样从后台渲染列表，怎么根据文章的id获取文章的具体内容。以及值与值之间的传递，vue-router 里query和params的区别及使用。 一、query和params 先来看看query和params是怎样传值和接收参数的吧！后面会用到的哦！ （1）query方式传参和接收参数 query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数 传递参数：把数据发送出去 this.$router.push({ path:'/aaa/bbb/ccc', query:{ id.
vue文章收集
baidu_36831253的博客
04-04 147
1.）vue技术揭秘 https://ustbhuangyi.github.io/vue-analysis/components/patch.html#createcomponent
vue3 Router 点击index中的按钮，查看相应的详情信息，并且传递id，及其路由的定义方法。
花花鱼的专栏
07-26 219
vue3的路由的跳转，路由的配制等
vue手机端项目-文章详情（未完成）
qq994849611的博客
03-15 590
在 api/article.js 中新增封装接口方法 在组件article/index.vue中调用获取文章详情 展示文章详情 先处理标题、作者信息、文章正文显示这几个部分，其他留到稍后处理 处理内容加载状态 需求： 加载中，显示 loading 加载成功，显示文章详情 加载失败，显示错误提示 如果 404，提示资源不存在 其它的，提示加载失败，用户可以点击重试重新加载 处理正文样式 文章正文包括各种数据：段落、标题、列表、链接、图片、..
使用Vue 3实现一个简单的博客架构，包含文章列表和文章详情
最新发布
有我更精彩的博客
08-20 406
通过使用 Vue 3 的setup语法糖，我们能够快速构建一个简单的博客架构。在这个例子中，我们展示了如何使用 Vue Router 管理路由，以及如何使用响应式数据展示文章列表和详情。当然，以上的结构非常基础，随着你对 Vue 的深入了解，你可以添加更多的功能，比如评论系统、文章创建、删除等操作。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作书籍详情。
vue添加博客功能、展示博客详情，主要用到表单、双向绑定、v-show、v-for、过滤器filter等
编程界明世隐的博客
12-22 850
做了一个表单添加的实例，非常适合入门 没有花时间去做样式，所以不太好看，效果是这样的: 1.用v-model来绑定表单中的各个内容，修改内容后会实时的反映到下面的博客总览中，比如： 博客标题：<input type="text" v-model="blog.title" class='input'> 作者： <select v-model="blog.author"> <...
vue路由传参 vue路由传参
11-18
Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 是实现单页面应用（SPA）功能的重要组成部分。在构建SPA的过程中，我们经常需要在不同的路由之间传递参数，以便于组件之间共享数据。Vue Router 提供了两种...
Vue-CLI项目中路由传参的方式详解
10-16
在Vue-CLI项目开发中，路由传参是常见的需求之一。正确的传参方式不仅可以使代码更加清晰，而且能够帮助我们更好地组织和维护项目。以下我们将详细介绍三种在Vue-CLI中进行路由传参的方法：标签传参方式、逻辑传参...
vue不通过路由直接获取url中参数的方法示例
12-09
然而，有时为了灵活性，可能需要不通过路由系统直接从URL中获取参数。当URL是以问号（?）开始，后面跟着键值对的形式（如`?mid=100`）时，Vue本身并不直接提供获取这些参数的方法。在这种情况下，我们需要借助...
基于vue-router 多级路由redirect 重定向的问题
10-18
在 vue-router 中配置多级路由并进行重定向，需要仔细处理每个级别的路由配置，确保路径书写正确且符合实际项目需求。当遇到重定向问题时，应根据具体情况分析可能的错误原因，如路径错误、参数传递不当等，并通过...
vue 列表页跳转详情页获取id以及详情页通过id获取数据
01-19
1.先在router.js中配置路由 { path: '/movieDetail/:movieId', name: 'movieDetail', component:movieDetail } 2.获取详情页的id,并派发父组件事件（movieList.vue)页面 。。。。。。。 methods:{ selectItem(item){ //console.log(item.m
vue3.0 如何获取echart容器id
qq_35145095的博客
06-05 987
上面的代码中，我们先通过ref属性获取到了ECharts容器元素，并在该元素上设置了id值为"echartsContainer"。然后在mounted钩子函数中，通过获取该元素的实例，并使用getAttribute方法获取到了该元素的id值，最后可以将该id值传递给ECharts实例的初始化函数中。
vue3 路由跳转新页面并传递参数与获取参数
Anlittlecat的博客
07-10 1434
parmas的形式传参需在路由处定义。
vue3中获取url地址中的数据，例如id
Bule_BUFF的博客
09-27 2148
调用后台接口，需要传入页面带过来的用户id。 vue2中这样就可以了，得到一个对象。里面有需要的数据。然后.id就可以获得到。 在vue3中用proxy(相当于vue2中的this)
vue中如何实现table的详情页获取及渲染
Schaffer的博客
05-21 1396
一、页面跳转方式 在页面中有两种跳转方式，第一种跳转方式是 使用 a 标签的形式进行跳转，也称之为标签跳转。第二种跳转方式是使用 window.location.href 的形式进行跳转，也称之为编程式跳转。 在vue页面中，实现列表页跳转到详情页，也就有两种方式。第一种是标签式跳转，通过router-link的形式进行跳转。第二种是编程式跳转，通过 this.$router.push的形式进行跳转。 this.$ route 和 this.$ router 的区别： ~ this.$route 是路由参
vue点击按钮跳转页面并且获取到当前这条数据的id 在跳转到的页面接收这个id...
weixin_42575505的博客
01-06 1636
可以在按钮的点击事件处理函数中使用 router.push 方法来跳转页面，在跳转时将数据的 id 作为参数传递。然后在跳转到的页面中，可以使用路由对象的 $route.params 属性来获取这个 id。 示例代码如下： <template> <div> <button @click="goToPage(item.id)">跳转</butto...
【Vue3】实现动态给id赋值，点击事件获取当前点击的元素的id操作
Jessieeeeeee的博客
01-16 5937
场景 需要让输出的 id 为 0，1…… 代码 <div v-for="(item,index) in list" :key="index" > <div :id="index" @click="b(index)">我是id</div> </div> 然后在 vue 的实例中就可以拿到对应的 id b(index){ this.list.splice(index,1); } 或 <div @click="open($event)" id="
Vue路由传参详解：3种方式及区别
Vue路由传参是Vue.js中用于管理单页面应用（SPA）间导航和状态传递的重要功能。本文将详细介绍三种常见的Vue路由参数传递方式：query、params以及直接在URL中拼接参数。 1. **通过query传参**： - **优点**: 可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值