vue-router组件重用 路由切换时的问题
当一个组件被重用时,切换路由,该组件不会被销毁。该组件的created也不会被调用,如果在created中有获取数据的操作,切换路由后,就不会再获取新的数据了,界面上就没有刷新。
其实官方文档就有解决方法:

官方连接https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html
但是,这里还需要注意一点,beforeRouteUpdate只有这种情况才会被调用:当前路由改变,但是该组件被复用时调用。例如带动态参数的路径 /user/:id,
从 /user/1 切换到 /user/2时,由于会渲染同样的user组件,因此组件实例会被复用,这个钩子就会在这种情况下被调用。
如果是/adduser切换到/user/1是不会调用beforeRouteUpdate的,这种情况下应该使用watch。
vue-router组件重用 路由切换时的问题的更多相关文章
- vue路由切换时内容组件的滚动条回到顶部
在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...
- vue(组件、路由)懒加载
const Login = resolve => require(['@/components/Login'], resolve) //就不用import了 Vue.use(Router) le ...
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- Vue 路由切换时页面内容刷新页面并更新数据
第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-aliv ...
- Vue的组件和路由
组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能. 组件的 ...
- 记录21.07.24 —— Vue的组件与路由
VUE组件 作用:复用性 创建组件的三种方式 第一种:使用extends搭配component方法 第二种:直接使用component方法 只有用vue声明且命名的才称之为创建组件 注意:templa ...
- vue 2.0 路由切换以及组件缓存源代码重点难点分析
摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...
- vue 使用同一组件,切换时不触发created、mounted钩子
两个页面参数不同使用同一组件,默认情况下当这两个页面切换时并不会触发created或者mounted钩子. 方法一:通过watch $route的变化来做处理 watch: { $route() { ...
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...
随机推荐
- Linux:Day18(下) Bind9
子域授权:每个域的名称服务器,都是通过其上级名称服务器在解析库中进行授权. 类似根域授权tld: .com IN NS ns1.com. .com IN NS ns1.com. ns1.com IN ...
- Couchbase入门——环境搭建以及HelloWorld
一.引言 NoSQL(Not Only SQL),火了很久了,一直没空研究.最近手上一个项目对Cache有一定的要求,借此机会对NoSQL入门一下.支持NoSQL的数据库系统有很多, 比如Redis ...
- openstack第六章:dashboard
第六篇horizon— Web管理界面 一.horizon 介绍: 理解 horizon Horizon 为 Openstack 提供一个 WEB 前端的管理界面 (UI 服务 )通过 ...
- 02-MySQL基础
MySQL基础 1.存储引擎 1.1MyISAM MySQL5.5以及之前默认存储引擎MyISAM 如果应用是以读操作和插入操作为主,只有很少的更新和删除操作,并且对事务的完整性.并发性要求不高,那么 ...
- 安装sql server2017出现错误:Visual Studio 运行时"Microsoft visual c++2017 X64 Minimum Runtime - 14.10.25008"需要修复
安装sql server 2017 Developer Edition时,安装选择“基本”,发生如下错误: 解决方法: 1.进入控制面板→程序中,找到“Microsoft visual c++2017 ...
- Java 常见摘要算法——md5、sha1、sha256
目录 摘要算法简介 md5 使用jdk内置方法实现md5加密 使用bc方式实现md5加密 使用cc方式实现md5加密 sha1 使用jdk内置方法实现sha1加密 使用bc方式实现sha1加密 使用c ...
- web 应用常见安全漏洞
1. SQL 注入 SQL 注入就是通过给 web 应用接口传入一些特殊字符,达到欺骗服务器执行恶意的 SQL 命令. SQL 注入漏洞属于后端的范畴,但前端也可做体验上的优化. 原因 当使用外部不可 ...
- syntax error near unexpected token `$'\r''
这种情况发生的原因是因为你所处理的文件换行符是dos格式的"\r\n"可以使用cat -v 文件名 来查看换行符是否是,如果是上述的,则行结尾会是^m需要转换成linux/unix ...
- HDU 4547 CD操作
传送门 没啥好说的.就是一个LCA. 不过就是有从根到子树里任意一个节点只需要一次操作,特判一下LCA是不是等于v.相等的话不用走.否则就是1次操作. 主要是想写一下倍增的板子. 倍增基于二进制.暴力 ...
- Vjudge Code
Stylus @-moz-document url-prefix("https://cn.vjudge.net/"), url-prefix("https://vjudg ...