Vue跳转同一界面多次，使用不同数据进行渲染

最新推荐文章于 2023-01-09 17:00:09 发布
最新推荐文章于 2023-01-09 17:00:09 发布
阅读量1.3k 收藏 3
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/xuanyuandai/p/11052112.html
版权
本文介绍了在Vue中如何处理多次跳转同一个商品详情页时，确保每次都能正确渲染对应商品的数据。通过分析在data、created、activated以及watch中处理数据的不同效果，提出了使用路由监听结合activated的方法来解决这个问题。强调了activated在新打开页面时执行的特点，以及watch在页面重复打开时的作用。
摘要由CSDN通过智能技术生成

这是经常遇到的一个问题，之前没有注意，有一天进行code Review提了出来。

举个栗子：网上商城想要看商品的详情，就需要通过列表页点击，进入详情页。详情页的数据处理是通过传过来的商品Id获取信息进行绑定渲染。

如果不进行处理，多次打开详情页就会出现问题。

1、如果是在详情页的data中直接进行Id获取，

 

　　然后在create中进行数据获取，那么在不关详情页并多次打开详情页的时候，之后打开的详情页数据都是和第一页相同的，这是因为data是在$vm实例创建之前就会进行赋值，

　　而在第一次打开页面时，就已经创建了实例并对data进行赋值了，之后每次打开都不会再创建；

2、在create中获取传过来的Id,然后调用方法获取数据，这种情况其实和1、原理是差不多的；

3、使用activated（这是和keep-alive协同使用的一个属性，如果没有设置keep-alive ，activated是不存在的），并在activated中进行Id获取和数据方法调用。

　　activated和created什么区别呢？created是创建vm实例时执行，而activated更像是每次新打开

最低0.47元/天 解锁文章
weixin_30235225
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 表格内容跳转页面_vue点击Dashboard不同内容 跳转到同一表格的实例
weixin_39559804的博客
12-20 301
1.点击跳转写法点击页面内容：优先级优先级点击页面内容：状态状态点击echarts柱状this.chartEvent.on('click',function (param) {that.$router.push({path: '/cases/case',query: { createdTime: param.name,type:"createdTime" }});})2.表格分页写法(不同跳转 显...
解决vue同一slot在组件中渲染多次的问题
12-10
Q：今天写公共组件的时候碰到一个奇葩的情况，slot内部需要再次调用slot,这就会导致同一slot在组件中渲染多次引发的bug A：把把父组件需要传入的dom结构作为props属性传递给slotRender,保证出来的dom结构不相同（尽管它们都是同一vnode渲染出来的） 定义一个渲染slot的组件 子公共组件调用 父公共组件调用 以上这篇解决vue同一slot在组件中渲染多次的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
10-16
今天小编就为大家分享一篇vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue封装组件接收不同数据渲染
weixin_61273407的博客
04-28 389
父组件 : <!-- 分页器组件 --> // 定义一个传递数据的名称 --> total // 传递的数据为 --> simTotal <paging :total="simTotal"></paging> 子组件 : <template> <div class="main"> <!-- 分页器组件 --> <el-pagination @size-change="handl
多个按钮/接口 渲染同一个vue分页表格
weixin_39408609的博客
01-09 181
3. 在分页器绑定的方法里 通过变量button判断下当前的按钮是哪一个 然后走不同的接口。2.每个按钮对应方法里，走完接口 覆盖表格的data时，修改button。1.定义公共变量button。
vue3实现不同数据结构渲染不同的UI页面功能
最新发布
03-06
（1）数据类型的种类多：decimal、int32、int64、text、bool、enum、struct、array （2）struct结构体非常复杂，考虑的情况多，比如结构体中可能有array、struct （3）UI实现结构体的页面样式麻烦，使用多重递归组件
vue 跳转 同一路由不刷新问题解决(相同path不同query)
01-08
 遇到个需求，要求在同一个path下，通过不同的query实现跳转不同的页面，大概就是下面这个样子: 这样当全路径变化的时候，就会触发跳转了。 BerySteven_shen 原创文章 79获赞 39访问量 6万+ 关注
vue路由对不同界面进行传参及跳转的总结
10-17
本文将详细讲解如何使用 Vue Router 进行界面间的传参与跳转，以及不同传参方式的优缺点。 首先，Vue Router 提供了两种主要的传参方式：`query` 和 `params`。这两种方式都可以实现页面间的参数传递，但它们在使用...
vue根据数据动态展示页面
06-19
vue根据数据动态展示页面，动态组件，动态表格，动态弹窗等，仅供静态数据进行页面展示。vue根据数据动态展示页面，动态组件，动态表格，动态弹窗等，仅供静态数据进行页面展示。vue根据数据动态展示页面，动态组件，动态表格，动态弹窗等，仅供静态数据进行页面展示。
Vue 选取不同的产品,渲染出不同的页面 (computed 踩坑)
cominglately的博客
08-29 1464
场景 分析 环境 问题 解决 源码 场景 产品经理提了一个需求： 产品标准化处理，新增产品或者编辑产品的时候 可以直接通过页面操作； 一个产品的开通只要再网站输入要求即可 产品新的属性也是页面操作 分析 现状 各个产品线比较混乱，隶属于不同的项目组, 所以有各自的产品表 , 产品配置表 实现 各个产品合并成一个产品表, 提取公共属性，其余有差异的...
Vue在页面数据渲染完成之后的调用方法
10-18
今天小编就为大家分享一篇Vue在页面数据渲染完成之后的调用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2.0重新渲染数据三种方法
04-30
利用v-for渲染数据，通过方法改变了数据，视图没有更新，由于javascript的限制，Vue不能检测到以下变动的数组，本DEMO主要展示解决办法。
vue跳转同一个页面数据不更新问题
sunluyi的博客
06-17 1269
路由更新就重新请求数据 watch: { // 监听相同路由下参数变化的时候，从而实现异步刷新 '$route'(to,from) { this._initData(); this.nickname = this.$route.query.nickname;//修改页面标题 } },
vue-router切换不同参数共用路由来显示页面的方法
薛定喵君的博客
06-28 3837
遇到需要切换页面显示,重新请求接口但是前端路由不变时的一种处理方法 项目基于element-UI开发。页面左侧菜单控制右半部分内容显示，但是设计稿上有几个差异较大的页面需要共用一个路由，高亮显示菜单。 网上搜索一番后决定采取query传参的方式来在同一个路由上切换显示不同页面。 处理方法可能遇到的问题参考资料# 处理方法 页面内监听路由变化 watch: { $route(to, from...
[html] 一个标签上同时出现三个或多个class属性，请问它的渲染顺序是怎样的？
歌谣的博客
03-15 1040
[html] 一个标签上同时出现三个或多个class属性，请问它的渲染顺序是怎样的？ 按照css定义的顺序从前往后渲染，后定义的同类属性覆盖前面定义的。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
单页应用如何实现根据不同URL的Hash值展示不同页面
Tom098的博客
06-08 554
单页应用，比如用Vue开发的一个单页应用，针对URL的Hash值不同，也即#后边的部分不同，可以展示(路由到)不同的页面(Vue组件)。在浏览器的地址栏的#后边更改值，并不会dao'z
vue两个完全相同页面，不同参数的处理方案
qq_42339350的博客
07-27 2185
使用watch是因为如果直接从页面1到页面2，created是不会执行的。
解决vue+element 需求为：多个菜单指向同一个页面，页面的数据是根据选择的菜单来进行动态渲染
qq_44162778的博客
07-20 2733
问题： 1、根据element文档其中tags标签栏属性index代表菜单唯一性、路由地址 2、点击菜单页面数据不重新渲染 3、点击菜单进页面时没数据（前提：功能都已经全部完成） 解决： 1、解决菜单唯一性可以在index参数值后面添加参数 （“aaa?ID =” +res.data[i].ID） //因为我这里项目的需求只需要把其中一小块动态渲染就可以了， //所以我这里就直接请求的接口然后直接去push在数组里面的 数组.push({ key:'3-2-'+[i],
vue 不同条件展示不同页面_Vue 指令 / 页面展示
weixin_42128315的博客
02-22 2270
页面展示基本指令v-text用于在页面中展示数据，可以简写为{{ }}的形式{{msg}}v-html同样是用于展示数据，与v-text区别相当于innerHtml和textContentv-pre用来在展示页面是跳过渲染某一段代码，该方法主要可以用来跳过没有指令的代码来提高加载速度{{msg}}v-once添加了该指令的元素/组件只会渲染一次，之后vue重新渲染时会直接跳过该元素/组件，即使我们...
vue如何对同一路由多次传递不同表单数据参数，并渲染出来
05-03
在中，如果需要在同一个路由中传递不同的参数并渲染出来，可以使用动态路由和$route对象来实现。 首先，在路由配置中，将需要传递的参数定义为动态路由参数，例如： ``` { path: '/form/:id', name: 'form', component: Form } ``` 然后，在组件中，可以通过$route对象获取当前路由的参数，例如： ``` <template> <div> <h1>Form {{ $route.params.id }}</h1> <!-- 这里根据不同的参数渲染不同的表单 --> </div> </template> ``` 这样，当访问 /form/1 时，组件中的 $route.params.id 就会被设置为 1，从而渲染出对应的表单。当访问 /form/2 时，$route.params.id 就会被设置为 2，从而渲染出另一个表单。 如果需要在同一个页面中动态切换表单，可以使用watch监听$route的变化，根据不同的参数加载不同的表单数据。例如： ``` <template> <div> <h1>Form {{ $route.params.id }}</h1> <form v-if="formData"> <!-- 这里渲染表单 --> </form> </div> </template> <script> export default { data() { return { formData: null } }, watch: { '$route.params.id': { immediate: true, // 立即执行一次 handler(val) { // 根据不同的参数加载不同的表单数据 this.formData = loadFormData(val) } } }, methods: { loadFormData(id) { // 加载表单数据 } } } </script> ``` 这样，当路由参数改变时，watch会自动执行handler方法，根据新的参数加载对应的表单数据并渲染出来。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值