两个页面参数不同使用同一组件,默认情况下当这两个页面切换时并不会触发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. hive parquet table 配置使用压缩

    创建parquet table : create table mytable(a int,b int) STORED AS PARQUET; 创建带压缩的parquet table: create t ...

  2. mysql更改密码与远程管理

    set password = ': #在当前用户下更改密码 grant all privileges on *.* to root@"%" identified by " ...

  3. 删除小脚本 srm

    提示:只能删除当前路径下的目录或文件 #!/bin/bash #将测试好的脚本,拷贝到 $PATH 能够搜索到目录下.并且改名 例如: /usr/local/bin cp /test/srm.sh / ...

  4. 紫书 习题 10-2 UVa 808(建立坐标+找规律)

    这次是我遇见过最迷的一次 我写的程序uDebug全过 和ac程序对拍也过,求出来的坐标是一模一样的,最后结果输出的方式也是一样的 交上去就是错的 迷 第一次遇到这种情况 大佬在哪里 #include& ...

  5. ArcGIS api for javascript——地图配置-滑动器的刻度线、方向、大小的改变

    描述 本例展示了如果删除缩放等级滑动器的刻度线.通过设置esriConfig里的sliderLabel为null来实现: esriConfig.defaults.map.sliderLabel = n ...

  6. crm使用soap删除字段

    //C# 代码: //DeleteAttributeRequest request = new DeleteAttributeRequest(); //request.EntityLogicalNam ...

  7. BestCoder Round #11 (Div. 2)

    太菜,仅仅能去Div2.(都做不完 ORZ... 各自是 HDU: 5054pid=5054"> Alice and Bob 5055Bob and math problem 5056 ...

  8. C++对象模型——效率有了,弹性呢(第七章)

    7.4    效率有了,弹性呢 传统的C++对象模型提供有效率的运行期支持.这份效率,再加上与C之间的兼容性,造成了C++的广泛被接受度.然而,在某些领域方面,像是动态共享函数库(dynamicall ...

  9. HNU13303 Counting substhreengs(递推)

    题目:http://acm.hnu.cn/online/? action=problem&type=show&id=13303&courseid=0 题意:给你一个字符串,由数 ...

  10. Hadoop2.2集群安装配置-Spark集群安装部署

    配置安装Hadoop2.2.0 部署spark 1.0的流程 一.环境描写叙述 本实验在一台Windows7-64下安装Vmware.在Vmware里安装两虚拟机分别例如以下 主机名spark1(19 ...