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 ...
随机推荐
- NOIP2012提高组
D1T1.Vigenère密码 模拟 #include<iostream> #include<cstdio> using namespace std; int main() { ...
- screenshoter 連續截圖工具
https://pcrookie.com/?p=993 顯示 mouse 設定 Settings -> Saving -> Display mouse cursor
- 資料視覺化:使用Python與JavaScript 简介和目录
內容簡介 學習如何運用Python與JavaScript這組對超級強大的組合,處理手中的原始資料,建構出功能強大的互動式視覺化網站.在這一本以實務為主的書中,將告訴您如何善用Python和JavaSc ...
- centos tc 端口限速
#http://www.fx114.net/qa-178-108967.aspx#http://professor.blog.51cto.com/996189/1569481/#http://blog ...
- 爬虫练习二:GUI+下载百思不得姐网站视频
环境 python2.7 pycharm 课题:Python爬取视频(桌面版)---爬虫,桌面程序应用 优点:语法简洁,入门快,代码少,开发效率高,第三方库 1.图形用户界面---GUI 2.爬虫,爬 ...
- 安装CentOS 7 遇到的坑
1,U盘安装 1.1 用最新版UltraISO刻录到U盘 坑1,如果之前不是用UltraISO刻录,或者不是最新版,u盘的label就不是系统自带的,当你选择install centos 7然后ta ...
- PSR-2 编码风格规范
本篇规范是 PSR-1 基本代码规范的继承与扩展. 本规范希望通过制定一系列规范化PHP代码的规则,以减少在浏览不同作者的代码时,因代码风格的不同而造成不便. 当多名程序员在多个项目中合作时,就需要一 ...
- 51nod 1649.齐头并进-最短路(Dijkstra)
1649 齐头并进 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 在一个叫奥斯汀的城市,有n个小镇(从1到n编号),这些小镇通过 ...
- Linux是32位还是64位
命令行输入 file /bin/ls 显示 /sbin/init: ELF 64-bit LSB executable, x86-64 ... 则为64位 file /sbin/init /sbi ...
- [LOJ6278]数列分块入门 2
题目大意: 给你一个长度为$n(n\leq 50000)$的序列$A$,支持进行以下两种操作: 1.将区间$[l,r]$中所有数加上$c$: 2.询问区间$[l,r]$中小于$c^2$的数的个数.思路 ...