vue 使用同一组件,切换时不触发created、mounted钩子
两个页面参数不同使用同一组件,默认情况下当这两个页面切换时并不会触发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钩子的更多相关文章
- Vue学习之组件切换及父子组件小结(八)
一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <met ...
- Vue系列之 => 组件切换
组件切换方式一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- vue 动态创建组件(运行时创建组件)
function mountCmp (cmp, props, parent) { if (cmp.default) { cmp = cmp.default } cmp = Vue.extend(cmp ...
- Vue中在组件销毁时清除定时器(setInterval)
在mounted中创建并执行定时器,然后在beforeDestroy或者destroyed中清除定时器 <template> <div class="about" ...
- vue调用子组件方法时,参数传不过去
有可能是因为子组件方法用了 async await 子组件去掉async就好了
- Vue内置组件[回顾]
1.动态组件 在某些场景,往往需要我们动态切换页面部分区域的视图,这个时候内置组件component就显得尤为重要. component接收一个名为is的属性,is的值应为父组件中注册过的组件的名称, ...
- vue实现tab选项卡切换
上代码: <template> <div class="push"> //点击按钮 <div class="tab&qu ...
- vue -vantUI tab切换时 list组件不触发load事件解决办法
最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...
- vue路由切换时内容组件的滚动条回到顶部
在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...
随机推荐
- Git强制覆盖master分支
在开发中,通常会保持两个分支master分支和develop分支,但是如果因为develop上面迭代太多而没有及时维护master,最后想丢弃master而直接将测试确认过的develop强推到mas ...
- 第三讲 $\mathbb{R}^4$上平凡主丛的联络、曲率与Yang-Mills泛函
一. $\mathbb{R}^4$或$\mathbb{R}^n$上平凡主丛的联络与曲率$\newcommand{\R}{\mathbb{R}}$ 回忆切丛$T\R^n\cong \R^n\times\ ...
- 题解 UVA10328 【Coin Toss】
这道题目其实就是说有N张纸牌,问至少连续K张正面朝上的可能性是多少. 可以用递推做.首先我们将题目所求从 至少K张 转化为 总数 - 至多K张 (为什么要这样自己想) 设F[i][j]为前i个纸牌至多 ...
- Redis中的持久化操作
本篇博客主要来解说一下怎样Redis中的持久化操作,当然了不是一篇理论性的博客,主要还是分享一下在redis中怎样来配置持久化操作. 1.介绍 redis为了内部数据的安全考虑,会把本身的数 ...
- quick 3.3载入Spine问题
近期项目要升级到Quick 3.3, 而且使用了Spine作为动画编辑器, 在此把升级过程中.有关quick 3.3 载入Spine遇到的坑在此记录一下. 1.Spine版本号问题 首先Quick 3 ...
- hdoj-1164-Eddy's research I【分解质因数】
Eddy's research I Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...
- poj1062 Bellman 最短路应用
昂贵的聘礼 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 41066 Accepted: 11959 Descripti ...
- 《Android编程权威指南》PhotoGallery应用梳理
PhotoGalley是<Android编程权威指南>书中另外一个重要的应用.
- Cisco交换机端口安全
Cisco交换机端口安全 通过端口设置,可以限制允许访问交换机上某个端口的MAC地址以及IP(可选)来实现严格控制对该端口的输入,最终确保网络接入安全.配置网络安全时应该注意如下问题: 1 ...
- msiexec
msiexec: runCmd = new String[]{ "msiexec", "/i", exeName, "/quiet", &q ...