当前位置: 首页 > 编程笔记 >

浅谈vue-router路由切换 组件重用挖下的坑

郑宏朗
2023-03-14
本文向大家介绍浅谈vue-router路由切换 组件重用挖下的坑,包括了浅谈vue-router路由切换 组件重用挖下的坑的使用技巧和注意事项,需要的朋友参考一下

问题描述:vue-router导航切换 时,如果两个路由都渲染同个组件,组件会重(chong)用,组件的生命周期钩子不会再被调用,使得组件的一些数据无法根据 path的改变得到更新

翻车现场再现:

这是我的/router/index.js 的内容节选

export default new Router({
 routes: [
 {
 path: '/main',
 component: Main
 },
 {
 path: '/get',
 component: Main
 }
 ]
})

这是我的 Main.vue的内容节选

<p>{{$router.currentRoute.path}}</p>

以上情景很明显 ,我是想要显示路由跳转前和路由跳转后的 path值

路由从 /main 跳转到了 /get ,理想情况是 网页中显示的路由从 /main 变成了 /get

但事实是网页没有一点变化 ,显示的内容依然是 /main

车祸原因分析

从我的车况来看, 我的这次路由跳转前后使用了完全相同的组件 ,通过仔细查看vue-router文档对应位置 ,发现了如下关键内容

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

route object 是 immutable(不可变) 的,每次成功的导航后都会产生一个新的对象。

这两个关键的信息 表明,正常组件不复用时,组件内的 route对象是最新路由 对应的, 但是组件复用时,由于组件的生命周期钩子不会再被调用,组件内的route对象还是原来的,不会得到更新,所以出现了页面的path 信息 跳转前后没有变化

前往救援

原因分析清楚了,开始解决吧,还好vue-router提供了解决的api 如下

使用 2.2 中引入的 beforeRouteUpdate 守卫:

const User = {
 template: '...',
 beforeRouteUpdate (to, from, next) {
 // react to route changes...
 // don't forget to call next()
 }
}

修改完后的Main.vue如下

data () {
 return {
 path:this.$router.currentRoute.path;
 }
}
beforeRouteUpdate (to, from, next) {
 path = this.$router.currentRoute.path;
}

结果救援现场再次翻车

页面上的 path依旧没有变化

又再次分析原因,查看 vue-router文档对应位置 ,发现重要内容如下

beforeRouteUpdate (to, from, next) {
 // 在当前路由改变,但是该组件被复用时调用
 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
 // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
 // 可以访问组件实例 `this`
 },

上面说的是

/foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,

我的是 从/main 调到/get ,并不符合上面的情况,活该翻车

一次真的救援

data () {
 return {
 path:this.$router.currentRoute.path;
 }
}
watch: {
 '$route' (to, from) {
 this.path = this.$router.currentRoute.path 
 }
}

这次真的救援成功了,页面的 path从 /main 变成了 /get

以上这篇浅谈vue-router路由切换 组件重用挖下的坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 推荐直接使用官方 vue-router,VUX部分组件支持link属性直接支持vue-router的路由参数,vux2模板内置了vue-router。 如果使用了过渡(转场动画),在iPhone上使用左划返回时动画会再执行一遍,目前没有找到可行的处理方法,如果你有处理方案,欢迎PR。 https://github.com/airyland/vux/pull/2259

  • 什么是路由 后端路由 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源。 当前端输入url请求资源时,服务器会监听到是什么url地址,那后端会返回什么样的资源呢?后端这个处理的过程就是通过路由来分发的。 总结:后端路由,就是把所有url地址都对应到服务器的资源,这个对应关系就是路由。 前端路由 对于单页面应用程序来说,主要通过URL中的hash(url地址中的#

  • 路由功能浅谈 在本章 选择恰当的分片数量和分片副本数量 一节中,已经提到使用路由功能可以只在一个分片上执行查询命令,作为提高系统吞吐量的一种解决方案。接下来作者将详细地介绍这一功能。 分片和分片中数据 通常情况下,ElasticSearch是如何把数据分发到各个分片中,哪个分片存储哪一类的文档等细节并不重要。因为查询时,将查询命令分发到每个分片就OK了。唯一的关键点在于算法,将数据均等地分配到各个

  • 本文向大家介绍Vue.js路由组件vue-router使用方法详解,包括了Vue.js路由组件vue-router使用方法详解的使用技巧和注意事项,需要的朋友参考一下 使用Vue.js + vue-router 创建单页应用是非常简单的。只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可。 一、普通方式基本例子: 二、块化机制编程基本例子,以在vue-cli中的使用方法为例

  • 在标记为副本之前,请仔细阅读此内容,我向您保证,我已经阅读并尝试了每个人在stackoverflow和github上提出的关于此问题的所有建议。 我在我的应用程序中有一条路线,如下所示; route rendering呈现打开用户角色的组件,并基于该角色惰性加载正确的Routes组件,Routes组件呈现主页的开关。简化后,如下所示。 然后是路由组件 因此,问题是每当用户从/导航到/秒等...应用

  • 我试图路由到一个类组件,但它给我一个错误。当我将组件更改为功能性组件时,路由就开始工作了。如何路由到类组件? 我刚开始使用React-Router。我首先有一个要路由到的功能组件。但是一旦我意识到组件需要是一个类,我就把它更改为一个类,现在路由显示 “无法获取/探索/单词”。