两个页面参数不同使用同一组件,默认情况下当这两个页面切换时并不会触发created或者mounted钩子。

方法一:通过watch $route的变化来做处理

watch: {
$route() {
if (this.$route) {
...
}
}
},

方法二:在 router-view上加上一个唯一的key,来保证路由切换时都会重新渲染触发钩子

<router-view :key="key"></router-view>

computed: {
key() {
return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
}
}

vue 使用同一组件,切换时不触发created、mounted钩子的更多相关文章

  1. Vue学习之组件切换及父子组件小结(八)

    一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. Vue系列之 => 组件切换

    组件切换方式一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. vue 动态创建组件(运行时创建组件)

    function mountCmp (cmp, props, parent) { if (cmp.default) { cmp = cmp.default } cmp = Vue.extend(cmp ...

  4. Vue中在组件销毁时清除定时器(setInterval)

    在mounted中创建并执行定时器,然后在beforeDestroy或者destroyed中清除定时器 <template> <div class="about" ...

  5. vue调用子组件方法时,参数传不过去

    有可能是因为子组件方法用了 async  await 子组件去掉async就好了

  6. Vue内置组件[回顾]

    1.动态组件 在某些场景,往往需要我们动态切换页面部分区域的视图,这个时候内置组件component就显得尤为重要. component接收一个名为is的属性,is的值应为父组件中注册过的组件的名称, ...

  7. vue实现tab选项卡切换

    上代码: <template>   <div class="push">     //点击按钮     <div class="tab&qu ...

  8. vue -vantUI tab切换时 list组件不触发load事件解决办法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...

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

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

随机推荐

  1. Git强制覆盖master分支

    在开发中,通常会保持两个分支master分支和develop分支,但是如果因为develop上面迭代太多而没有及时维护master,最后想丢弃master而直接将测试确认过的develop强推到mas ...

  2. 第三讲 $\mathbb{R}^4$上平凡主丛的联络、曲率与Yang-Mills泛函

    一. $\mathbb{R}^4$或$\mathbb{R}^n$上平凡主丛的联络与曲率$\newcommand{\R}{\mathbb{R}}$ 回忆切丛$T\R^n\cong \R^n\times\ ...

  3. 题解 UVA10328 【Coin Toss】

    这道题目其实就是说有N张纸牌,问至少连续K张正面朝上的可能性是多少. 可以用递推做.首先我们将题目所求从 至少K张 转化为 总数 - 至多K张 (为什么要这样自己想) 设F[i][j]为前i个纸牌至多 ...

  4. Redis中的持久化操作

       本篇博客主要来解说一下怎样Redis中的持久化操作,当然了不是一篇理论性的博客,主要还是分享一下在redis中怎样来配置持久化操作.  1.介绍  redis为了内部数据的安全考虑,会把本身的数 ...

  5. quick 3.3载入Spine问题

    近期项目要升级到Quick 3.3, 而且使用了Spine作为动画编辑器, 在此把升级过程中.有关quick 3.3 载入Spine遇到的坑在此记录一下. 1.Spine版本号问题 首先Quick 3 ...

  6. hdoj-1164-Eddy&#39;s research I【分解质因数】

    Eddy's research I Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...

  7. poj1062 Bellman 最短路应用

    昂贵的聘礼 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 41066   Accepted: 11959 Descripti ...

  8. 《Android编程权威指南》PhotoGallery应用梳理

    PhotoGalley是<Android编程权威指南>书中另外一个重要的应用.       

  9. Cisco交换机端口安全

    Cisco交换机端口安全       通过端口设置,可以限制允许访问交换机上某个端口的MAC地址以及IP(可选)来实现严格控制对该端口的输入,最终确保网络接入安全.配置网络安全时应该注意如下问题: 1 ...

  10. msiexec

    msiexec: runCmd = new String[]{ "msiexec", "/i", exeName, "/quiet", &q ...