当一个组件被重用时,切换路由,该组件不会被销毁。该组件的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组件重用 路由切换时的问题的更多相关文章

  1. vue路由切换时内容组件的滚动条回到顶部

    在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...

  2. vue(组件、路由)懒加载

    const Login = resolve => require(['@/components/Login'], resolve) //就不用import了 Vue.use(Router) le ...

  3. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  4. Vue 路由切换时页面内容刷新页面并更新数据

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-aliv ...

  5. Vue的组件和路由

    组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能. 组件的 ...

  6. 记录21.07.24 —— Vue的组件与路由

    VUE组件 作用:复用性 创建组件的三种方式 第一种:使用extends搭配component方法 第二种:直接使用component方法 只有用vue声明且命名的才称之为创建组件 注意:templa ...

  7. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  8. vue 使用同一组件,切换时不触发created、mounted钩子

    两个页面参数不同使用同一组件,默认情况下当这两个页面切换时并不会触发created或者mounted钩子. 方法一:通过watch $route的变化来做处理 watch: { $route() { ...

  9. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

随机推荐

  1. Linux:Day18(下) Bind9

    子域授权:每个域的名称服务器,都是通过其上级名称服务器在解析库中进行授权. 类似根域授权tld: .com IN NS ns1.com. .com IN NS ns1.com. ns1.com IN ...

  2. Couchbase入门——环境搭建以及HelloWorld

    一.引言 NoSQL(Not Only SQL),火了很久了,一直没空研究.最近手上一个项目对Cache有一定的要求,借此机会对NoSQL入门一下.支持NoSQL的数据库系统有很多,  比如Redis ...

  3. openstack第六章:dashboard

    第六篇horizon— Web管理界面     一.horizon 介绍:   理解 horizon   Horizon 为 Openstack 提供一个 WEB 前端的管理界面 (UI 服务 )通过 ...

  4. 02-MySQL基础

    MySQL基础 1.存储引擎 1.1MyISAM MySQL5.5以及之前默认存储引擎MyISAM 如果应用是以读操作和插入操作为主,只有很少的更新和删除操作,并且对事务的完整性.并发性要求不高,那么 ...

  5. 安装sql server2017出现错误:Visual Studio 运行时"Microsoft visual c++2017 X64 Minimum Runtime - 14.10.25008"需要修复

    安装sql server 2017 Developer Edition时,安装选择“基本”,发生如下错误: 解决方法: 1.进入控制面板→程序中,找到“Microsoft visual c++2017 ...

  6. Java 常见摘要算法——md5、sha1、sha256

    目录 摘要算法简介 md5 使用jdk内置方法实现md5加密 使用bc方式实现md5加密 使用cc方式实现md5加密 sha1 使用jdk内置方法实现sha1加密 使用bc方式实现sha1加密 使用c ...

  7. web 应用常见安全漏洞

    1. SQL 注入 SQL 注入就是通过给 web 应用接口传入一些特殊字符,达到欺骗服务器执行恶意的 SQL 命令. SQL 注入漏洞属于后端的范畴,但前端也可做体验上的优化. 原因 当使用外部不可 ...

  8. syntax error near unexpected token `$'\r''

    这种情况发生的原因是因为你所处理的文件换行符是dos格式的"\r\n"可以使用cat -v 文件名 来查看换行符是否是,如果是上述的,则行结尾会是^m需要转换成linux/unix ...

  9. HDU 4547 CD操作

    传送门 没啥好说的.就是一个LCA. 不过就是有从根到子树里任意一个节点只需要一次操作,特判一下LCA是不是等于v.相等的话不用走.否则就是1次操作. 主要是想写一下倍增的板子. 倍增基于二进制.暴力 ...

  10. Vjudge Code

    Stylus @-moz-document url-prefix("https://cn.vjudge.net/"), url-prefix("https://vjudg ...