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 ...
随机推荐
- .net 过滤 sql防注入类,省地以后每次都要重新弄!
/// <summary> /// 过滤不安全的字符串 /// </summary> /// <param name="Str"&g ...
- undefined reference to XXX 问题原因
原文地址:http://blog.csdn.net/cserchen/article/details/5503556 Linux下编译程序时,经常会遇到“undefined reference to ...
- .apache.commons.io 源代码学习(一)
java的初学者,准备通读各种高水平源代码,提升能力. 为了避免自己的惰性,写博客. 版本:2.5 开发平台:netbeans. 今天是第一天,网上先看个例子:http://www.importnew ...
- C++ 二位数组做参数传递
指针的强大功能,,,,简直牛逼!!! #include<iostream> #include<cstdio> #include<map> using namespa ...
- codevs 1025 选菜——01背包
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 在小松宿舍楼下的不远处,有PK大学最不错的一个食堂—— ...
- my-git-wiki-doing
github项目quick setup git初始化 git init git添加remote git remote add origin YOURS_REMOTE_URL git修改remote的u ...
- POJ 3281 Dining(网络流拆点)
[题目链接] http://poj.org/problem?id=3281 [题目大意] 给出一些食物,一些饮料,每头牛只喜欢一些种类的食物和饮料, 但是每头牛最多只能得到一种饮料和食物,问可以最多满 ...
- 【bzoj2160】【啦啦队排练】manacher(马拉车)+差分+快速幂
[pixiv] https://www.pixiv.net/member_illust.php?mode=medium&illust_id=34562780 向大(hei)佬(e)势力学(di ...
- [JSOI2017]原力
题目大意: 一个$n(n\le5\times10^4)$个点,$m(m\le10^5)$条边的无向图.每条边有一个边权$w_i(w_i\le10^6)$和一个附加属性$t_i(t_i\in\{R,G, ...
- UITableView中的dequeueReusableCellWithIdentifier的方法
在使用UITableView控件的时候,datasource的代理方法经常会使用到下面的方法来加载UITableView的数据显示 - (UITableViewCell *)tableView:(UI ...