我在学习 Broadcasting using Vue according to this article

它是 Laravel、Pusher 和 npm

我在 resources/assets/js/app.js 中有以下代码

const app = new Vue({ 
    el: '#app', 
    data: { 
        messages: [] 
    }, 
    methods: { 
        addMessage(message) { 
            this.messages.push(message); 
        } 
    }, 
    created() { 
        axios.get(window.Laravel.AppUrl + "/Messages").then(response => { 
           this.messages = response.data;  
        }); 
    } 
}); 
 
Vue.component('chat-composer', require('./components/ChatComposer.vue')); 

下面是blade中的标签

<chat-composer v-on:messagesent="addMessage"></chat-composer> 

一切正常...问题是上面的 app.js 代码每次都在所有路由上运行。

我在 Angular Js 中制作示例代码，可以选择制作 Controller 、模型和 View 。

有没有办法运行代码，使上述路由仅适用于特定路由？

请您参考如下方法:

您在根 Vue 实例的 created 方法中调用 axios。它将在加载应用程序的每个页面上调用它。将仅某些功能需要的东西移到需要它的组件中。

如果您希望不同的组件出现在不同的页面上，您可以只在页面上呈现您需要的组件，或者考虑在客户端使用 Vue Router。