提醒一下,当使用路由参数时,例如从 /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 响应路由参数的变化的更多相关文章

  1. vue,一路走来(7)--响应路由参数的变化

    今天描述的问题估计会有很多人也遇到过. vue-router多个路由地址绑定一个组件造成created不执行 也就是文档描述的,如下图 我的解决方案: created () { console.log ...

  2. Vue router中携带参数与获取参数

    Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...

  3. Vue router 一个路由对应多个视图

    使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...

  4. Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  5. vue中监听路由参数的变化

    在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...

  6. 【问题】VUE 同一页面路由参数变化,数据不刷新

    依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个页面并不会运行created组件生命周期,导致数据还是第一次进入的数 ...

  7. VUE 同一页面路由参数变化,视图不刷新的解决方案

    1.监听路由处理 watch: { $route(to, from) { // 逻辑 // 重新调用数据接口 } }, 2.beforeRouteUpdate导航守卫 路由更新时触发 beforeRo ...

  8. vue同一个路由,但参数发生变化,页面不刷新的问题(vue监听路由参数变化重新渲染页面)

    watch: { $route: function(newVal, oldVal) { console.log(oldVal); //oldVa 上一次url console.log(newVal); ...

  9. Vue router 全局路由守卫

    记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...

随机推荐

  1. 魔法使的烟花(NOIP模拟赛Round 7)

    [问题描述] 魔法森林里有很多蘑菇,魔法使常常采摘它们来制作魔法药水.为了在6月的那个奇妙的晚上用魔法绽放出最绚丽的烟花,魔法使决定对魔法森林进行一番彻底的勘探. 魔法森林分为n个区域,由n-1条长度 ...

  2. 【程序打包工具 Inno Setup】CreateProcess 失败:代码 740(Inno Setup打包的程序提升为管理员权限)

    原文参考 https://www.cnblogs.com/SnailProgramer/p/4243666.html http://blog.csdn.net/x356982611/article/d ...

  3. Java微信公众平台开发_01_本地服务器映射外网

    做微信开发之前,我们需要先做一个内网穿透,让我们的工程可以在公网上被访问. 一.工具列表 内网穿透的相关工具有: (1)natapp 官网 :https://natapp.cn/ (2)花生壳 官网: ...

  4. [BZOJ4756][Usaco2017 Jan]Promotion Counting 树状数组

    4756: [Usaco2017 Jan]Promotion Counting Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 305  Solved: ...

  5. AC日记——Dining poj 3281

    [POJ-3281] 思路: 把牛拆点: s向食物连边,流量1: 饮料向t连边,流量1: 食物向牛1连边,流量1: 牛2向饮料连边,流量1: 最大流: 来,上代码: #include <cstd ...

  6. maven构建的模块化的JavaWeb工程

    最近对maven构建的模块化的JavaWeb工程,比较感兴趣,所以自己就想从头弄一个出来,在此做一个记录,供以后学习. 前置条件:电脑上有eclipse(或者myeclipse,记事本也可以,那样就得 ...

  7. jquery导出Excel表格

    1.引用js插件 <script src="tableExport.js"></script> <script src="jquery.ba ...

  8. git回溯到指定版本

    git回溯到指定版本 git log命令查看仓库日志 然后使用git checkout 命令 例如回溯到上图中的版本 git checkout 12db5d6fd138922a8aaf2214c84c ...

  9. 基于SpringMVC的上传文件实现

    基于SpringMVC的上传文件实现 1.项目源码 源码地址:upload 2.关键代码 @RequestMapping("/upload2") public void datal ...

  10. Codeforces Round #191 (Div. 2) A. Flipping Game【*枚举/DP/每次操作可将区间[i,j](1=<i<=j<=n)内牌的状态翻转(即0变1,1变0),求一次翻转操作后,1的个数尽量多】

    A. Flipping Game     time limit per test 1 second memory limit per test 256 megabytes input standard ...