Question

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

Page1.vue
Page2.vue

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

我在第2页用一个简单的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>

Answer 1

每当您切换路线时，与前一路线相关的组件都会被销毁。

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

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

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

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

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

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

这是codepen。

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

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

//Page1 component script

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


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

以上代码仅缓存Page1组件

Answer 2

或者，您可以在beforeDestroy

中删除事件侦听器

export default {
  methods: {
    channelListener(data) {
      console.log("Page1.vue");
    }
  },
  mounted() {
    socket.on("channel:listen", this.channelListener);
  },
  beforeDestroy() {
    socket.off("channel:listen", this.channelListener);
  }
};

切换页面时，Vue路由器安装了两次

2 个答案: