如何让router-link进入详情页返回不刷新

2024-09-01

vue中keepAlive的用法[返回页面不刷新]

本文转载于時間蒼白了誓言_49b9 使用vue单页开发项目时遇到一个问题:在列表页进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用解决这个问题,下面是我的使用心得. 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 1.在app.vue页面中把替换成下图所示: <keep-alive> <router-view v-if="$route.meta.keepLive"></router-

vue项目实现列表页-详情页返回不刷新，再点其他菜单项返回刷新的需求

问题背景:有时候一些列表会有一些跳转的需求,比如跳到详情页.或者是其他相关的页面(比如跳到用户列表去查看用户的相关信息)等,此时再返回列表页,列表页会刷新重置.目前需求就是需要改成如下情况: 问题1.列表 - 详情页,返回,不刷新重置: 问题2.再点其他菜单,再返回,需要刷新重置. 解决思路: 解决需求自然是想到vue的keep-alive去缓存组件,但是缓存组件有个不好的弊端,就是以后再进入页面也一直保持着上一次浏览的状态,那么如果我们有很多查询条件的情况,或者比如 route/:id 这种动

react 从商品详情页返回到商品列表页，列表自动滚动上次浏览的位置

现状:目前从商品详情页返回到商品列表页,还需要再去请求服务数据,还需要用户再去等待获取数据的过程,这样用户体验非常不好, 遇到的问题: 1:如何将数据缓存, 2:如何获取和保存列表滑动的高度, 3:判断商品列表页的上一个页面是什么? 如果是从搜索页进到商品列表页的话我们需要清除缓存,获取接口数据, 如果是商品详情页返回到商品列表页的话就用缓存数据,并且滑到到上次浏览的位置. 一:数据缓存使用react全家桶reducers保存数据 dispatch({ type: types.PRODUCT_

angluar1+ionic详情页返回在原来的位置（缓存数据和页面高度）

因为是老项目,近期开发遇到了个需求就是从详情页按返回按钮要求返回到原来列表的页面位置,刚开始准备用的cache:true,但是存在大大的问题就是新增和编辑后返回数据都不是最新的,无法重新刷新页面reload方法失效了,那肯定是不过关的(如果没有新增和编辑的列表页可以考虑用),想了想改成了强制刷新parent.location.reload,在:$rootScope.$on('$stateChangeSuccess',function(){})监听切换成功和数据保存成功后强制刷新页面,效果是可以了

keep-alive 实现从列表页到详情页，然后再回到列表页并保持原来列表页的页码数，并且只刷新数据

思路: keep-alive应用场景介绍 <keep-alive> 不会在函数式组件中正常工作,因为它们没有缓存实例.结合router,缓存部分页面 activated 和 deactivate 生命周期钩子 include string或正则,只有名称匹配的组件会被缓存 2.1.0+ exclude string或正则, 名称匹配的组件不会被缓存 2.1.0+ max 最多可以缓存多少组件实例 2.5.0+ 例子: <keep-alive include="a,b"

Django:文章详情页面评论功能需要登录后才能使用，登录后自动返回到文章详情页

背景: 文章详情页正在查看文章,想评论一下写的不错,但是需要先登录才能.页面长这个样子: 方案: 1.点击登录链接时,将该页面的URL传递到登录视图中 request.path获取的是当前页面的相对路径请<a href="{% url 'account:user_login' %}?cur_url={{ request.path }}">登录</a>后回复登录时的URL如下图,会带上之前页面的相对url 2.在登录视图中获取该cur_url的值,等待登录成功

微信小程序--详情页的推荐位置继续打开详情页；返回之后分享等数据不正确问题

问题背景 -- 分享的数据来源当前在维护的小程序项目使用wepy开发:分享的数据都是通过接口请求后台的形式获得:然后存在了数据data的对象中:类似定义分享数据 data = { shareData: "", // 分享数据 } 获取分享数据 tip.getShareDataReci(res => { that.shareData = res; // 赋值后台返回的分享数据 that.$apply(); }, curCode); // curCode当前商品的唯一code值

Django----使用模板系统渲染博客页面、实现列表和详情页的跳转、前后跳转功能

.模板写法同Flask,可以参考之前的FLask-模板 .将之前的BootStrap静态页面中的数据使用模板写 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Djanjo</title>  <link rel=&quo

easyUI 创建详情页dialog

使用easyui dialog先下载jQuery easyui 的压缩包下载地址http://www.jeasyui.com/download/v155.php 解压后放在项目WebContent目录下创建jsp文件引入easyui js和css文件 <script type="text/javascript" src="jquery-easyui-1.5/jquery.min.js"></script> <script type

python 全栈开发，Day81(博客系统个人主页,文章详情页)

一.个人主页随笔分类需求:查询当前站点每一个分类的名称以及对应的文章数完成这个需求,就可以展示左侧的分类它需要利用分组查询,那么必须要会基于双下划线的查询. 基于双下划线的查询,简单来讲,就是用join.将多个表拼接成一张表,那么就可以单表操作了! 表关系图图中箭头开始的英文字母表示关联字段按照箭头方向查询,表示正向查询,否则为反向查询分解步骤: 先来查询每一个分类的名称以及对应的文章数看上面的关系图,以Category表为基础表来查询Article表对应的文章数,需要用到反向查

BBS-文章详情页、评论、评论树

1.简单的实现评论功能 article_detail.html,拿到数据由路--给视图函数--写入数据库 <p>评论内容:</p> <textarea name="></textarea> <p> <button class="btn btn-default comment_btn">提交评论</button> </p> urlpath("comment/"

Flask实战第62天：帖子详情页布局

在templates/front/下创建详情页面front_pdetail.html 编辑front.views.py创建详情页的视图函数 from flask import abort ... @bp.route('/p/<post_id>/') def post_detail(post_id): post = PostModel.query.get(post_id) if not post: abort(404) return render_template('front/front_pd

【音乐App】—— Vue-music 项目学习笔记：歌手详情页开发

前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 歌曲列表歌曲播放一.子路由配置以及转场动画实现 components->singer-detail目录下:创建singer-detai.vue route->index.js中:引入并配置Singer子路由SingerDetail import SingerDetail from '@/components/singe

aspcms产品详情页调取相关产品

产品详情页调用相关产品最常见的应用就是装饰公司网站,设计师页面要求调取设计师做过的案例.aspcms本身有这个功能,但不能完全符合要求,看代码 {aspcms:content sort={aspcms:sortid} num=10 order=order} <a href='[content:link]' > <img src='[content:pic]' /> </a> <a href="[content:link]">[conten

Django项目: 6.新闻详情页

一.功能需求分析 1.功能新闻详情加载评论功能添加评论功能二.新闻详情页 1.业务流程分析业务流程: 判断前端传递新闻id是否为空,是否为整数,是否存在 2.接口设计接口说明: 类目说明请求方法 GET url定义 /news/<int:news_id>/ 参数格式 url路径参数参数说明: 参数名类型是否必须描述 news_id 整数是新闻id 返回结果: html页面,直接通过模板渲染的方式实现 3.后端代码视图 # 在news/views.py中定义如下视图

BBS项目分布搭建三(个人站点时间归档补充，实现侧边栏跳转、无线级分类、实现文章详情页展示功能)

BBS项目分布搭建三(个人站点时间归档补充,) 1. 个人站点时间归档 """ settings.py设置最好更改以下: LANGUAGE_CODE = 'zh-hans' TIME_ZONE = 'Asia/Shanghai' USE_TZ = False # 数据库时间 """ # 在 blog.html文件中修改: <div class="panel panel-danger"> <div class=

我的Vue之旅 10 Gin重写后端、实现页面详情页 Mysql + Golang + Gin

第三期 · 使用 Vue 3.1 + Axios + Golang + Mysql + Gin 实现页面详情页使用 Gin 框架重写后端 Gin Web Framework (gin-gonic.com) 整体代码量相比传统http写法少了30%,简洁.可读性高. C:. │ go.mod │ go.sum │ init.go │ main.go │ ├───controller │ checkerror.go │ comment.go │ gameblog.go │ gamelist.go

从零开始，搭建博客系统MVC5+EF6搭建框架（5），博客详情页、留言、轮播图管理、右侧统计博文

一.博客系统进度回顾上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效果 2.2实现控制器在前台控制器中创建一个Blog的控制器,主要是展示博客分类以及详情页 Action详情页实现: /// <summary> /// 详情页 /// </summary> /// <param name="id"></param&

iOS开发——UI进阶篇（十）导航控制器、微博详情页、控制器的View的生命周期

一.导航控制器出栈 1.initWithRootViewController本质 UIViewController *vc = [[OneViewController alloc] init]; // 创建导航控制器 // 导航控制器必须要有一个根控制器 UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:vc]; // 会调用push方法 // initWithRoot

vue通过id从列表页跳转到对应的详情页

1. 列表页:列表页带id跳转到详情页详情页:把id传回到后台就可以获取到数据了 2.列表页跳转到详情页并更改详情页的标题列表页:带id和页面标题的typeid跳转到详情页详情页:在html绑定标题,获取到传过来的typeid,然后判断typeid是多少对应返回标题. 补充:获取后台的数据,就是去访问的后台的服务器(怎么访问?答:就是你怎么访问网站那样子)然后他有定义到是必须的参数的时候,就是在连接后必须带的参数,才可以获取到后台数据,不是必须的跟在连接后面也不会影响.就如我的第二个例子,

多线程爬虫爬取详情页HTML

注意:如果想爬取详情页的信息请按须添加方法 import requests import os import re import threading from lxml import etree #爬去详情页得HTML内容 class CnBeta(object): def get_congtent(self,url): #获取网页首页HTML信息 r = requests.get(url) #将获取得HTML页面进行解码 html = r.content.decode('utf-8') #返回

如何让router-link进入详情页返回不刷新

热门专题