vue 实现 文章详情页 返回到 列表页 需要返回到原来列表页进入的地方

最新推荐文章于 2024-06-06 14:20:45 发布
最新推荐文章于 2024-06-06 14:20:45 发布
阅读量2.6k 收藏 8
点赞数 2
分类专栏： js vue实践 vue-router 文章标签： vue vue实践
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41296616/article/details/102988966
版权
vue实践 同时被 3 个专栏收录
23 篇文章 0 订阅
订阅专栏
js
8 篇文章 0 订阅
订阅专栏
vue-router
4 篇文章 0 订阅
订阅专栏

这个问题 网上有很多相关博客文章 但是有很多人压根自己就没有尝试过   直接 ctrl+c + ctrl+v 不知道复制这些干啥呢  实在是遗憾...

小编 这次 写下 自己亲身实践

首先处理 这个问题 我是分步骤处理的  

想回到原来列表位置   可以缓存 + 滚动 

vue 中 有  keep-alive  是 vue内置组件 可以保留原状态 避免重新渲染数据了

我在 app.vue组件中 这样子操作

然后在有需要缓存的 路由上 加上 meta标志

然后在 列表页 加入 路由钩子 

 

基本上实现  返回原来位置  （亲测有效 ）

 

如果觉得小编写得不错  可以打赏....

小马哥的天涯
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
VUE3+GO个人博客系统:文章列表页和详情页的实现
sybh的博客
06-11 853
在构建个人博客系统时，文章列表页和详情页是必不可少的两个界面。文章列表页用于展示所有文章的简略信息，详情页则用于显示文章的全文内容。在本篇博客中，我们将使用 Vue 3 作为前端框架，Go 作为后端语言，MySQL 作为数据库，来构建这两个页面。
vue ElementUI的Tab选项卡从子页面跳转回对应的选项卡
huangcy的博客
04-10 3521
问题描述 假设tab有3个选项卡（Tab A，Tab B，Tab C），3个选项卡分别对应3个页面（A页面，B页面，C页面），3个页面都可以跳转到自己的子页面（a子页面，b子页面，c子页面），在进行elementUI的tab切换时，在子页面的跳转能回到相应的Tab页面。 解决思路 在C的子页面返回时，返回一个参数type：C 在Tab页面中接收参数，判断type的值，当type=“C”时，改变T...
vue开发网站--对文章详情页的接口内容进行处理
最新发布
weixin_48596030的博客
06-06 168
接口返回的数据中既包含文字也包含图片，并且需要对图片进行处理（设置最大宽度为100%并拼接域名）
Vue从详情页返回列表页，页面定位到该详情页对应列表项位置
xiu52t的博客
02-26 2640
需求描述 从列表页，进入详情页面，点击返回按钮，定位到原始列表页中对应详情列表项位置。 实现方案 列表页：使用锚点定位实现。列表页dom挂载完成后，判断路由是否有hash，若有页面定位到对应hash的列表项。 <template> <div> <ul> <li v-for="item in list" :key="item.id" :id=...
在VSCode中添加.vue文件模版
weixin_45034639的博客
09-11 2256
步骤一: 在VSCode中安装插件: Vetur 步骤二: Code–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定 步骤三: 清空文件中原有代码 步骤四: 粘贴自定义的.vue模版 <!-- --> <template> <div class=''></div> </template> &...
vue单页应用，加入分页后，点击到第二页的时候，进入某个详情页，然后点击浏览器后退按钮，并没有返回到第二页，而是返回到了首页，并且刷新了页面，此时用keepAlive解决
jo_an_na的博客
08-22 3753
备注https://www.cnblogs.com/sysuhanyf/p/7454530.html 这个比我写的更详细，我只是保留下我的实际代码，方便以后查阅； import Vue from 'vue'; import Router from 'vue-router'; import CompanyList from '@/views/Company/List'; import Co...
vue实现页面滚动到底部刷新
10-16
在Vue.js框架中，实现页面滚动到底部自动刷新功能，通常用于无限滚动或瀑布流布局，以便用户无需手动翻页即可加载更多数据。以下是一个基于Vue.js的示例，详细解释了如何实现这个功能： 首先，创建一个新的Vue实例...
解决Vue页面固定滚动位置的处理办法
08-30
当用户从详情页返回列表页时，我们可以读取存储的 scrollTop 值并将其设置为 document.body.scrollTop，以恢复滚动位置。 代码示例： ```javascript mounted() { setTimeout(function() { document.body....
详解vue之页面缓存问题(基于2.0)
08-31
这样，当用户从列表跳转到详情，再返回列表，最后再次进入详情时，页面将正确地重新渲染并显示新的数据。 除了手动清理和重置数据，Vue Router 还提供了一些内置机制来处理页面缓存。例如，你可以使用`keep-alive`...
前端框架vue实现的一个类似今日头条的移动端项目
09-12
5. **路由管理**：在项目中可能使用Vue Router进行页面路由管理，实现页面间的跳转，例如，用户可以从资讯列表跳转到文章详情页，或者从个人中心返回首页。 6. **状态管理**：对于复杂应用，可能会使用Vuex进行全局...
Vue+SpringBoot实现的多用户博客管理平台.rar
06-17
用户可以创建、编辑和删除自己的博客文章，这些操作会通过RESTful API与后端通信，API需要处理CRUD（创建、读取、更新、删除）操作，并返回相应的JSON响应。 此外，项目可能还涉及到了数据库设计，比如创建用户表、...
Vue 列表页带参数进详情页的操作(router-link)
01-18
首先，仔细看文档！！！一点一点的踩坑过来的~~~ 这里介绍params和query两种方法 1.用params传参 列表页： （注意：用params传参这里是命名路由，用name） 路由配置如下： export default new Router({ routes: [ { path: '/msgDetail/:id', name: 'msgDetail', component: msgDetail } ] 详情页
Vue制作在线文章管理系统.zip
06-14
使用Vue2.0+element 编写的文章管理器，包含会员管理，图书管理等功能。。。。。。。。。。。。。。。。
vue实现返回列表页面仍然在之前的位置
qq_47452289的博客
11-24 795
vue实现返回列表页面仍然在之前的位置 1、使用Vue中的标签包裹列表组件。 <div id="app"> <keep-alive> <router-view/> </keep-alive> </div> 因为我们在加载数据时一般都是在created生命周期函数中加载，所以只要重新回到列表页面就会触发created生命周期函数中的加载数据方法。 <keep-alive> 包裹动态组件时，会缓存不活动的组
vue移动端 文章页面跳转到详情页
weixin_59519449的博客
04-15 1337
效果目标： 1. 在文章列表用 @click .native 绑定事件，并且带上参数的id 2.在methods 的方法里使用 this.$router.push() 的方法进行去跳转 //跳转到详情页面 itemClickFn(id){ // console.log(1234) this.$router.push({ path:`/ArivleDetail?art_id=${id}` }) } 注：.
Vue.js入门 0x13 实战：知乎日报项目开发-文章详情页
cell的博客
03-15 507
加载内容 右侧的文章内容区域封装成了一个组件。在components目录下新建daily-article.vue组件，它唯一接收唯一的一个prop:id,也就是文章的id，如果id变化了，就说明切换了文章，需要请求新的文章内容。 在app.vue中导入daily-article.vue组件，并在文章列表的Item组件上绑定查看文章事件 //app.vue &lt;templ...
vue 路由传参 小案例 点击文章列表 进入当下文章页面
小羽向前跑
02-16 1386
最终功能： index.js路由页面，给单独文章页面配置路由： 用id区分当下用户点击哪条文章 { path: '/blog/:id', name: 'singleblogs', component: singleblogs }, showblogs.vue列表页面路由配置代码： 在所有列表页面，点击标题，跳转页面： v-bind:to...
vue实战开发三（博客页面总览）
`or 1 or 不正经の泡泡
11-27 2287
文章目录前言项目结构首页编辑器个人空间总结 前言 经过差不多五天的时间对前端进行开发，现在总算是把基本的客户端的前端页面做得差不多了，关于后端页面的话，嫖一个后端模板就好了，主要还是客户端的这一块要做好。这个也是本人第一做前后端的项目，可能多有不足，请多多指教~ 先来说说目前white hole 大致的功能的吧，关于这个项目的话其实在国庆的时候我是用Django 用 MVT的模式开发了一个的，当然后面由于各种原因没进行下去，一方面是没时间，另一方面是前端不好做，前后端耦合太紧密了导致我开发的时候逐渐偏离了方
vue+element+js实现文章管理的分页功能
qq_44760912的博客
11-21 836
毕设篇：使用vue+element+js实现文章管理的分页功能 效果展示 实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compa
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
05-01
另外，当详情页返回列表页时，如果需要回到之前浏览的位置，可以使用浏览器的历史记录来实现。在详情页跳转到列表页时，可以记录当前页面的滚动位置，并将其保存到本地存储或URL参数中。当用户点击浏览器的返回按钮...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值