时间戳

首页 > 解决方案 > 切换页面时Vue路由器挂载两次

vue.js - 切换页面时Vue路由器挂载两次

问题描述

我正在使用vue-router来切换页面。现在我有两个 Vue 文档：

在两个 .vue 页面中，我都在使用该mounted()实例。在 Page1.vue 中，代码开始监听套接字连接。当我切换到 Page2 并返回到 Page1 时，它开始两次监听套接字连接。

我已经在 page2 中使用了一个简单的 console.log('Page1.vue') 和 Page2.vue 进行了测试。当我切换页面时，它会多次console.log，每切换一个页面，它就会多做一个console.log。

我试图只在mounted()实例中执行一次代码，但是在切换页面后，它什么也没做。

我怎样才能照顾它只安装一次，或者我需要在切换页面之前卸载？如果是这样，我该怎么做？

Page1.vue 和 Page2.vue

<template>
  // The template
</template>
<script>
var socket = io(window.SOCKET_URL, {secure: true});

export default {

    mounted(){
        socket.on('channel:listen', function (data) {
            console.log('Page1.vue');
        }
    }
}
</script>

解决方案

<template>
  // The template
</template>
<script>
var socket;

export default {
    beforeCreate() {
        socket = io(window.SOCKET_URL, {secure: true});
    },

    mounted(){
        socket.on('channel:listen', function (data) {
            console.log('Page1.vue');
        }
    },

    beforeDestroy() {
        socket.close();
    },
}
</script>

标签： vue.js

解决方案

每当您切换路由时，与前一个路由相关的组件都会被破坏。

因此，当您从 Page1 切换到 Page2 时， Page1 组件将被销毁。然后，当您重新访问与 Page1 相关的路由时，它的实例再次创建，从而再次调用它的所有生命周期方法，包括mounted()您开始监听套接字的位置。

这是 vue 的默认行为。因此，要告诉 vue 销毁组件，请使用<keep-alive>.

<keep-alive>缓存非活动组件。

所以用keep-alive包装你的路由器视图：

<keep-alive>
   <router-view>
</router-view>

这会缓存出现在路由器视图中的所有组件实例。

这是一个代码笔。

如果您不想缓存来自路由器视图的所有路由，您可以使用include或exclude属性<keep-alive>。这告诉<keep-alive>缓存哪些组件实例。

因此，将name属性添加到要缓存的路由组件中。

//Page1 component script

export default{
    name: 'page1',
    ...
}


<keep-alive include="page1">  
    <router-view></router-view>
</keep-alive>

以上代码只缓存Page1组件

推荐阅读