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 ...
随机推荐
- ios手机弹出层上表单的操作,收起键盘焦点错乱的问题
今天遇到了ios手机下 弹出层上form表单 当收起键盘后,焦点错乱,无法再操作的问题 解决办法 function device() { const u = navigator.userAgent; ...
- lightgbm 学习笔记
首先是配置文件参数.参考自https://lightgbm.apachecn.org/#/docs/6 配置参数实在是太多了,大家还是去原文档查表吧orz 参数名 可选参数 作用 config= 自填 ...
- 制定ip池内随机生成ip地址
]) { +] = {}; unsigned mask = 0x0; sscanf(ip_pool, "%[^/]/%d", ip_addr, &mask); long l ...
- ubuntu安装mysql报错
ubuntu换源后安装mysql报错: 原因:版本高,不兼容,只需要还原apt下载源,然后 sudo apt-get install mysql-server即可正常安装mysql
- [置顶] Linux 虚拟地址与物理地址的映射关系分析【转】
转自:http://blog.csdn.net/ordeder/article/details/41630945 版权声明:本文为博主(http://blog.csdn.net/ordeder)原创文 ...
- UBI 文件系统移植 sys 设备信息【转】
转自:http://blog.chinaunix.net/uid-25304914-id-3058647.html cat /sys/class/misc/ubi_ctrl/dev --------- ...
- gitlab 搭建与迁移
#下载gitlabhttps://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el6/gitlab-ce-10.1.3-ce.0.el6.x86_64.rpm ...
- mysql故障(程序正在运行却找不到PID文件)
[root@slave ~]# /etc/init.d/mysql status ERROR! MySQL is running but PID file could not be found [ro ...
- 使用bottle进行web开发(1):hello world
为什么使用bottle?因为简单,就一个py文件,和其他模块没有依赖,3000多行代码. http://www.bottlepy.org/docs/dev/ 既然开始学习,就安装它吧. pip3 in ...
- Http与RPC通信协议的比较
OSI网络结构的七层模型 各层的具体描述如下: 第七层:应用层 定义了用于在网络中进行通信和数据传输的接口 - 用户程式:提供标准服务,比如虚拟终端.文件以及任务的传输 和处理: 第六层:表 ...