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

2024-02-13 17:23:00

问题描述：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相同路由参数不同不会刷新的问题

通常情况下我们喜欢设置keepAlive 包裹 router-view <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> 同时在created 中触发请求,在路由参数不同的情况下并不会执行对应的操作. 解决方法: 1.给 router-view 设置 key 属性为路由的完整路径 <keep-alive&g
vue 解决addRoutes动态添加路由后刷新失效问题

前言某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正. 应用场景:用户a登录进系统,页面上有个按钮,点击之后会动态添加路由并且跳转,跳转过去之后,用户刷新后也会停留在当前页面. 不点这个按钮,浏览器输入地址,用户会跳到404页面 github:https://github.com/Mrblackant/keepRouter/tree/master 思路 1.用户点击
Vue 路由切换时页面内容没有重新加载的解决方法

第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了<keep-alive>: <template> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> </t
解决vue 路由变化页面数据不刷新的问题

每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. 问题出在,我在电脑上做移动端页面的时候,相继跳到详情页,我想返回,点击按钮,直接跳转到了如上第一张图的样子,no,no,no,这不是我想要的结果,此刻,想到了通过改变url来改变页面的层级问题. 一级的parent为0,默认不显示或显示. 二级的parent为1,点击一级路由变为如图: 点击进入
vue 刷新之后嵌套路由不变重新渲染页面的方法

解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1.在router-view中加上条件渲染 v-if 默认为true.让它显示出来 2.写写一个reload方法,在页面刷新只有,点击某个查询条件的时候调用这个重载的方法这是条件渲染变化了为false 在修改数据之后使用 $nextTick, 条件渲染变化了为true 则可以在回调中获取更新后的 DOM 如果需要带有查询参数,可以用编程试导航,query来传参,但是这种方式可能刷新之后会有问题. 我的解决方法是在刷新之后点击页面
解决vue更新路由router-view复用组件内容不刷新的问题

本文知识点比较简单,主要面向vue新人解惑,vue前辈请忽略. 实现功能: 见上图,这是一个产品列表,当进入不同列表时应该更新内容. 代码如下: //router配置 { path: "/products/:category", name: "Products", components: { ... } } //组件js配置 mounted() { this.getData(this.$route.params.category); }, methods: { ge
vue-router路由参数刷新消失的问题解决方法

场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})传给主页组件,并在主页显示数据.但是刷新页面后,数据就消失了. 解决方案: 1.session&服务器渲染传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页数据,并通过响应头将sessionid传给浏览器并生成相应的cookie文件.这样下次请求页面时,浏览
浅谈vue-router路由切换组件重用挖下的坑

问题描述:vue-router导航切换时,如果两个路由都渲染同个组件,组件会重(chong)用,组件的生命周期钩子不会再被调用,使得组件的一些数据无法根据 path的改变得到更新翻车现场再现: 这是我的/router/index.js 的内容节选 export default new Router({ routes: [ { path: '/main', component: Main }, { path: '/get', component: Main } ] }) 这是我的 Main.v
浅谈vue 二级路由嵌套和二级路由高亮问题

第一层路由我写在app.vue里面.如图所示: footer.vue: 二级路由是这样: index.js里面的配置: 效果图: 效果出来了,又出现新的问题,就是点击二级路由的时候,默认的二级路由高亮不会去掉,如图所示: 在网上看到别人用exact方法,即在默认的二级路由里面加上exact,如图所示: 补充知识:vue - 子路由-路由嵌套描述:子路由,也叫路由嵌套,采用在children后跟路由数组来实现,数组里和其他配置路由基本相同,需要配置path和component,然后在相应部分添加
浅谈Vue.js路由管理器 Vue Router

起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>
浅谈Vue内置component组件的应用场景

官方的说明渲染一个"元组件"为动态组件.依 is 的值,来决定哪个组件被渲染.  <component :is="componentId"></component> 具体可以官网文档中的动态组件内置的组件component 场景这里通过一个业务场景来阐述vue内置component组件的应用. 如图所示,这里展示经典注册页面,注册分为邮箱注册
vue实现tab路由切换组件的方法实例

前言本文介绍的是使用vue自带的vue-router.js路由实现分页切换功能,下面话不多说了,来一起看看详细的实现代码吧实现图片如下下列为实现代码 css: *{ margin: 0; padding: 0; } #app ul{ width: 300px; height: 30px; list-style: none; } #app>ul>li{ width: 100px; height: 30px; float: left; } html: <div id="app
浅谈Vue父子组件和非父子组件传值问题

本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue <template> <div class='tmpl'> goodsList组件 </div> </template> <style> </style> <script> export default { data() { return{} }, creat
浅谈vue 组件中的setInterval方法和window的不同

vue组件中,this指向实例,[实例中重写了setInterval等一整套方法].所以,千万不能和 window 下挂载的方法混用具体不同在于,window.setInterval执行完比后返回一个id,而vue实例中返回[定时器对象],当然该对象中包含一个_id的私有属性因为 clearInterval 方法参数是id,所以最佳实践是统一使用 window 的方法,不要使用 vue组件的方法 vue中的定时器方法,要使用箭头函数,不要出现 const that = this 的写法 //
浅谈vue单一组件下动态修改数据时的全部重渲染

今天在学习vue的过程中,发现一个有趣的现象. 在某一组件下的某一数据通过点击事件被动态修改的时候,对应view中的数据同步的进行了修改,没错,这不是废话吗,vue的一大特色就是数据的双向绑定.可有趣的是,该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化这就让我这个刚入门的小白有点奇怪了,我修改一个,怎么变了两个????脑洞放开一想,会不会数据在双向同步的时候,发生了什么,比如.是不是只要有一个节点变了,node都重新进行了加载??? 我想这其中的缘由必定
浅谈vue中组件绑定事件时是否加.native

组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template>  <input type="text" @keyup.native="show($event)
浅谈Vue 函数式组件的使用技巧

什么是函数式组件没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法,它只是一个接受一些 prop 的函数.简单来说是一个无状态和无实例的组件基本写法: Vue.component('my-component', { functional: true, // Props 是可选的 props: { // ... }, // 为了弥补缺少的实例 // 提供第二个参数作为上下文 render: function(createElement, context) { // ... }

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

相关推荐

随机推荐

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