当一个组件被重用时,切换路由,该组件不会被销毁。该组件的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. Node.js如何执行cmd

    最近正好因业务的一个需求需要研究如何根据vscode的插件名来下载对应的插件以解决之前将插件打包上传到服务器上面导致的延迟问题(插件体积小还好说,如果体积过大,即便是压缩打成zip包,如果同一时刻很多 ...

  2. mybatis动态数据更新 + 批量动态数据插入

    动态更新 <update id="updateElevator" parameterType="com.diantijiang.saas.data.elevator ...

  3. mysql 安装 linux系统下

    1.先检查是否安装过mysql,如果没有可进行下面的操作. 2.下载mysql的安装包 cd /usr/local    到这个目录下 mkdir mysql    新建一个mysql文件夹 cd m ...

  4. 分析dhcp.lease文件,统计DHCP服务器IP自动分配

    #!/usr/bin/env python # coding=utf-8 import string import time,datetime class TIMEFORMAT: def __init ...

  5. WebApi(五)-Swagger接口文档①简单集成

    1,通过NuGet引用Swashbuckle 2,打开项目属性-->生成,勾选XML文档文件,保存 3,找到项目App_Start文件夹下WebApiConfig查找GetXmlComments ...

  6. 利用ajax技术 实现用户注册。

    一.ajax? 异步加载技术,在不刷新网页的前提下,实现部分网页内容的更新! AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容. 思考? 注册界面刚好可以应用 ...

  7. P4137 Rmq Problem / mex (莫队)

    题目 P4137 Rmq Problem / mex 解析 莫队算法维护mex, 往里添加数的时候,若添加的数等于\(mex\),\(mex\)就不能等于这个值了,就从这个数开始枚举找\(mex\): ...

  8. net core swagger接口

    net swagger接口 引用NuGet包 Install-Package Swashbuckle.AspNetCore //控制台 Microsoft.Extensions.PlatformAbs ...

  9. Java EE Expression Language

    什么是EL? 形如这样(立即执行的): ${sessionScope.cart.total} 或者这样(延迟执行的): #{customer.name} 的表达式语言(Expression Langu ...

  10. CF1152E Neko and Flashback--欧拉路径

    RemoteJudge 第一次见到欧拉路径的题 注意到\(b\)和\(c\)的构造方法很特殊,即对于一个位置(经过\(p\)作用后)\(i\),若两个数分别为\(b_i\)和\(c_i\),那么在\( ...