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 ...
随机推荐
- Linux Mint---fcitx中文,日语输入法
安装中文输入法,我这边选了小企鹅,先前用过scim,稍微比较了下,效果还是这个好 安装可一步即可搞定 apt-get install fcitx fcitx-table-wubi-large fcit ...
- 杭电oj2072
因为一直不能ac先发这里,希望有看到的大佬能指点一二. 先讲一下我的基本思路,首先将一整行数据保存在数组中,接着遍历数组,根据空格将每个单词存入二维数组中,最后遍历二维数组,找出其中不同的单词并计数. ...
- mtk GPIO口
http://blog.csdn.net/mcgrady_tracy/article/details/39320691 mt6582多达168个GPIO口,当然这些GPIO口是复用的,注意lk和Lin ...
- HTML5初学笔记
今天学习了下HTML5的基本知识,用画笔在画布上画了几个东西,效果如图,相关代码如下,注意点总结在末尾: <!DOCTYPE html> <html> <head> ...
- AC日记——The Street codechef March challenge 2014
The Street 思路: 动态开节点线段树: 等差序列求和于取大,是两个独立的子问题: 所以,建两颗线段树分开维护: 求和:等差数列的首项和公差直接相加即可: 取大: 对于线段树每个节点储存一条斜 ...
- bzoj2301(莫比乌斯反演)
bzoj2301 题意 求区间 [a, b] 和 区间 [c, d] 有多少对数 (x, y) 使得 gcd(x, y) = k . 分析 参考ppt 参考blog 考虑用容斥分成四次查询, 对于每次 ...
- [POJ 1935] Journey
Link: POJ1935 传送门 Solution: 一道吓唬人的水题 注意这是一棵树,两点间仅有唯一的路径! 于是每个“关键点”和起点只有一条路径,想去起点另一棵子树上的节点必须要回到起点 如果必 ...
- 洛谷 U19159 采摘毒瘤
题目背景 Salamander见到路边有如此多的毒瘤,于是见猎心喜,从家里拿来了一个大袋子,准备将一些毒瘤带回家. 题目描述 路边共有nn 种不同的毒瘤,第i 种毒瘤有k_i 个,每个需要占据d_i ...
- bzoj 3462: DZY Loves Math II
3462: DZY Loves Math II Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 211 Solved: 103[Submit][Sta ...
- [xsy2213]tower
题意:给一个地图,地图上的每个位置是空地或一个炮或一些敌人,给定每个炮的方向(上/下/左/右),每个炮只能打一个位置且炮弹轨迹不能相交,问最多打到多少敌人 原题貌似是TC SRM 627的题,题解在这 ...