“约见”面试官系列之常见面试题之第一百篇之响应路由参数的变化（建议收藏）

当使用路由参数时，例如从 /user/aside导航到 /user/foo，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

注意:

（1）从同一个组件跳转到同一个组件。

（2）生命周期钩子created和mounted都不会调用。

可以使用router的组件内钩子函数

beforeRouteUpdate(to,from,next){

//在这个钩子函数中：to表示将要跳转的路由对象，from表示从哪个路由跳转过来，next多数就是需要调用

//created和mounted不调用，无法拿到需要的动态值，就通过to.path,to.params等

//可以在这个函数中打印to，具体看to对象有什么可以使用的属性

}

添加watch监听

watch: {// 方法1 //监听路由是否变化'$route' (to, from) {if(to.query.id !== from.query.id){this.id = to.query.id;this.init();//重新加载数据}}}//方法 2 设置路径变化时的处理函数watch: {'$route': {handler: 'init',immediate: true}}

为了实现这样的效果可以给router-view添加一个不同的key，这样即使是公用组件，只要url变化了，就一定会重新创建这个组件。

<router-view :key="$route.fullpath"></router-view>

“约见”面试官系列之常见面试题之第一百篇之响应路由参数的变化（建议收藏）相关推荐

“约见”面试官系列之常见面试题第二十五篇之对vue-router的理解（建议收藏）
先整体展示下vue-router使用方式,请牢记一下几步哦! import Vue from 'vue' import VueRouter from 'vue-router' //注册插件如果是在浏 ...
“约见”面试官系列之常见面试题之第一百零七篇之vue的作用（建议收藏）
Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容 ...
“约见”面试官系列之常见面试题之第一百零六篇之css只在当前组件中起作用（建议收藏）
方法很简单,在组件中的style前面加上scoped就可以了,示例:
“约见”面试官系列之常见面试题之第一百零五篇之v-if与v-show（建议收藏）
相同点:v-if与v-show都可以动态控制dom元素显示隐藏不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css--display:none,dom元素还 ...
“约见”面试官系列之常见面试题之第一百零四篇之vue优点（建议收藏）
vue的优点: 1.轻量级框架只关注视图层,是一个构建数据的视图集合,大小只有几十kb Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统 2.简单易学国人开发,中文文档,不存在语言障 ...
“约见”面试官系列之常见面试题之第一百零三篇之vue-router实现路由懒加载（建议收藏）
vue异步组件 es提案的import() webpack的require,ensure() vue异步组件技术 ==== 异步加载 vue-router配置路由 , 使用vue的异步组件技术 , 可 ...
“约见”面试官系列之常见面试题之第一百零二篇之vue-router的两种模式（建议收藏）
众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别. hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个 ...
“约见”面试官系列之常见面试题之第一百零一篇之vue-router传参（建议收藏）
vue-router传递参数分为两大类编程式的导航 router.push 声明式的导航 <router-link> 编程式的导航 router.push 编程式导航传递参数有两种类型: ...
“约见”面试官系列之常见面试题之第九十三篇之vue获取数据在哪个周期函数（建议收藏）
然后必须知道一点,vue是数据驱动的(只关心data即可),换句话说,就是,只要我能操作到 data中的数据即可. 所以,根据上面的生命周期,其实你放到 mounted中完全可以,因为这个阶段data ...

“约见”面试官系列之常见面试题之第一百篇之响应路由参数的变化（建议收藏）

“约见”面试官系列之常见面试题之第一百篇之响应路由参数的变化（建议收藏）相关推荐

最新文章

热门文章