vue-router 响应路由参数的变化
提醒一下,当使用路由参数时,例如从 /user/foo
导航到 /user/bar
,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。
复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) $route
对象:
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
或者:
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
注意是:
(1)从同一个组件跳转到同一个组件。
(2)生命周期钩子created和mounted都不会调用。
vue-router 响应路由参数的变化的更多相关文章
- vue,一路走来(7)--响应路由参数的变化
今天描述的问题估计会有很多人也遇到过. vue-router多个路由地址绑定一个组件造成created不执行 也就是文档描述的,如下图 我的解决方案: created () { console.log ...
- Vue router中携带参数与获取参数
Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...
- Vue router 一个路由对应多个视图
使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...
- Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转
今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...
- vue中监听路由参数的变化
在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...
- 【问题】VUE 同一页面路由参数变化,数据不刷新
依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个页面并不会运行created组件生命周期,导致数据还是第一次进入的数 ...
- VUE 同一页面路由参数变化,视图不刷新的解决方案
1.监听路由处理 watch: { $route(to, from) { // 逻辑 // 重新调用数据接口 } }, 2.beforeRouteUpdate导航守卫 路由更新时触发 beforeRo ...
- vue同一个路由,但参数发生变化,页面不刷新的问题(vue监听路由参数变化重新渲染页面)
watch: { $route: function(newVal, oldVal) { console.log(oldVal); //oldVa 上一次url console.log(newVal); ...
- Vue router 全局路由守卫
记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...
随机推荐
- [ CodeVS冲杯之路 ] P1010
不充钱,你怎么AC? 题目:http://codevs.cn/problem/1010/ 首先我们将坐标都+1,因为它是从(0,0)开始的 预处理出禁区,也就是马能到达的格子和马自己的格子,标上记号 ...
- kvm虚拟机最佳实践系列2-创建KVM及KVM优化
创建KVM及KVM优化 把KVM优化与KVM创建放在一起,是因为我们创建的KVM是要用在生产环境中,所以基础优化工作是必备的. 创建KVM 创建系统盘, 大小: 操作系统通常都不到10G,所以系统盘2 ...
- Ubuntu配置网络遇到的一些问题
Ubuntu配置网络遇到的一些问题 在配置Ubuntu网络时,曾遇到了一些问题.查找了一些博客,所幸都解决了.记录一下,以便日后查阅. 设置DNS sudo vim /etc/resolv.conf ...
- python接口自动化6-重定向(Location)【转载】
本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/python%E6%8E%A5%E5%8F%A3%E8%87%AA%E5%8A%A8%E ...
- Android 显示或隐藏标题栏进度条TitleProgressBar
1.新建项目,布局文件如下:activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/ ...
- AC日记——数颜色 bzoj 2120
2120 思路: 带修改的莫队: 对于离线排序询问的算法,如何修改呢? 每个询问添加一个修改标记: 表示当前询问在第几个修改之后: 然后把修改标记作为第三关键字来排序: 每次更新端点,先更新时间: 块 ...
- 浅谈如何做好Bug回归验证?
作为测试人员,我们都知道Bug的生命周期是: 我们都希望自己不仅有敏锐的洞察力能够全面的找出隐藏在软件中的bug,还希望自己有系统的分析能力能够准确的分析出每个bug的原因以至于能正确.全面的解决修复 ...
- Dfs+Spfa【p1606】[USACO07FEB]荷叶塘Lilypad Pond
Description 为了让奶牛们娱乐和锻炼,农夫约翰建造了一个美丽的池塘.这个长方形的池子被分成了M行N列个方格(1≤M,N≤30).一些格子是坚固得令人惊讶的莲花,还有一些格子是岩石,其余的只是 ...
- 背包【p1858】 多人背包(次优解 or 第k优解)
题目描述--->p1858 多人背包 分析: 很明显,这题是背包问题的一种变形. 求解 次优解or第k优解. 表示刚开始有点懵,看题解也看不太懂. 又中途去补看了一下背包九讲 然后感觉有些理解, ...
- MySQL命令show full processlist
processlist命令的输出结果显示了有哪些线程在运行,可以检查当前数据库的运行状态,两种方式使用这个命令. 1 进入MySQL/bin目录下输入mysqladmin processlist; 2 ...