nuxt页面跳转_nuxt 项目如何解决组件复用时页面不刷新的问题

组件复用会在两种情况下发生：

1、使用 keep-alive 时，页面再次跳转时，数据不更新

每一次路由的切换都会导致页面被重新渲染，无论是各种钩子还是异步获取数据函数都会被执行，为了提高网站性能，可以使用 keep-alive 包裹住 router-view，当路由的内容被加载过一次之后，就把内容放到内存中，下一次再进这个路由时，不需重新渲染这个页面，直接从内存中将内容取出放到页面中。

此时有两种选择可以处理组件复用时导致数据不刷新的问题：

1)如果一个页面需要动态获取数据的组件很多，那么就直接将此组件设置不实用 keep-alive 即可；

2)如果一个页面只有一两个组件需要动态获取数据，那么就在 activated 钩子中重新向后端获取部分组件的数据，如果不是实时动态获取数据，而只是在用户有相关操作时需要获取数组，那么可以结合一个公共的布尔变量来判断是否需要重新获取数据。那么这种方式又可以使用 keep-alive 来提高性能，又可以避免它带来的问题。

2、同一组件，参数变化，页面数据不更新的问题

比如说在详情页之间切换时，会导致不同详情页出现同一批数据的结果，这是 router-view 复用组件导致的问题。

1)解决的基本思路就是改变 router-view 的内部属性 key

可以先参考下 vue 项目是如何改变 router-view 的 key 的：vue刷新当前路由：router-view 复用组件时不刷新的3种解决方案总结

请将链接中的三种方式写到 layouts/default.vue 中，另外说下 watchQuery 的用法，比如：http://localhost:3000?name=wang&number=123 这个例子中，watchQuery: true 是说路由后面的所有查询参数(包括 name 和 number)都被监听了，watchQuery: ['name'] 的意思是只监听了 name 这个查询参数。

如果有查询参数就使用 watchQuery 方案，否则可以使用其他两种方式。当然也可以使用 watch 直接监听路由的变化。

nuxt页面跳转_nuxt 项目如何解决组件复用时页面不刷新的问题相关推荐

nuxt页面跳转_Nuxt.js错误页面跳转可能出现的问题
在我们的编程开发中,需要考虑 404 .500.连接超时(服务器关闭)是非常常见的手段. 首先我们知道的两种错误跳转知识: 有2种方式处理错误页面方式1:默认路径,_.vue .(先执行) 方式2: ...
vue 页面跳转404_Vue 项目棘手问题的解决方案
1. 页面权限控制和登陆验证页面权限控制页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出 ...
JS文件下载页面跳转出现空白页解决办法
原因文件下载出现空白页或页面跳转,是因为直接用文件地址跳转window.open或者location.href这种方式会有页面跳转的情况出现. 如果用iframe来做就可以解决这个问题实例 //传 ...
关于微信小程序跳转页面后不刷新问题，和页面跳转后左上角还保留了之前的页面，和存在返回按钮的解决方法
在微信小程序的页面跳转上,可能大多数的情况下会在一级子页面使用 wx.navigateTo跳转到二级页面,会从二级页面返回主页面或则从三级页面提交数据后返回主页面,为了良好的客户使用效果,在一二级页面 ...
razor页面跳转_如何在Blazor中使用Razor页面创建单页应用程序
razor页面跳转 In this article, we are going to create a Single Page Application (SPA) using Razor pages ...
html中实现页面跳转代码怎么写,用JavaScript怎么实现页面跳转？
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能.下面我们来看一下如何使用JavaScript跳转页面. JavaScript中几种页面跳 ...
H5页面iphone(苹果)手机点击输入框输入内容时页面自动放大
问题: H5页面,iPhone手机点击input搜索框,输入内容时,页面会自动放大. 解决: 方法一: html文件中加上移动端元信息 <meta name="viewport&qu ...
uniapp页面跳转报错URI malformed解决办法
错误示例 URI malformed" found in -> warn @ chunk-vendors.js:3503 e. 如图问题原因: 是因为跳转url携带的中文参数中有'% ...
IFrame中 Forms验证超时页面跳转跳出框架简单解决方法
在配置的登录页面上(例如:Login.aspx) 页面<head></head>中加入JavaScript代码: <script type="text/java ...

nuxt页面跳转_nuxt 项目如何解决组件复用时页面不刷新的问题

nuxt页面跳转_nuxt 项目如何解决组件复用时页面不刷新的问题相关推荐

最新文章

热门文章