Vue.js 切换页面时安装两次Vue路由器

我用它来交换页面。现在我有两个Vue文档：

• 第1.vue页
• 第2.vue页

在这两个.vue页面中，我都使用了

mounted（）

实例。在Page1.vue中，代码开始侦听套接字连接。当我切换到第2页并返回到第1页时，它开始监听两次套接字连接

我已经在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>

//模板
var socket=io（window.socket\u URL，{secure:true}）；
导出默认值{
安装的（）{
socket.on（'channel:listen'，函数（数据）{
console.log（'Page1.vue'）；
}
}
}

解决方案

<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>

//模板
无功插座；
导出默认值{
beforeCreate（）{
socket=io（window.socket\u URL，{secure:true}）；
},
安装的（）{
socket.on（'channel:listen'，函数（数据）{
console.log（'Page1.vue'）；
}
},
在…之前{
socket.close（）；
},
}

或者，您可以在销毁之前删除

中的事件侦听器

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

无论何时切换管线，与上一管线相关的组件都将被销毁

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

这是vue的默认行为。因此，要告诉vue不要破坏组件，请使用

缓存非活动组件

因此，请使用keep alive将路由器视图包装为：

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

以上代码仅缓存Page1组件
请共享此组件的小提琴或实时演示？在中关闭侦听器？
//Page1 component script

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


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