切换页面时vue路由器挂载了两次

Question

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

• Page1.vue
• Page2.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>

Answer 1

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

因此，当您从 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组件