Question

我正在学习 Broadcasting using Vue according to this article

它的Laravel，Pusher和npm

我在资源/资产/ 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'));

以下是刀片中的标记

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

一切正常......只是问题是以上app.js代码每次都在所有路线上运行。

我在Angular Js中制作示例代码，并且可以选择制作控制器，模型和视图。

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

Answer 1

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

如果您希望不同的组件出现在不同的页面上，您只能在页面上呈现所需的组件，或者在客户端使用 Vue Router 进行查看。

Answer 2

AngularJS具有控制器，模型和视图，通过它可以告诉您的应用程序应该如何构建，Vue JS在这个意义上更具适应性。但回到你的观点，为什么每次都运行代码：docs表示创建块：

创建实例后同步调用。在此阶段，实例已完成处理选项，这意味着已设置以下内容：数据观察，计算属性，方法，监视/事件回调。

因此，每次创建vue组件实例时，都会执行它的created块代码。 Here您可以看到不同的生命周期挂钩及其执行顺序。

您没有提供更多代码，但是从您的评论中可以看出，您有更多路由，因此您可以将此代码放在特定于该路由的组件中，here是要加载的数据的示例在beforeMount块中。

您还可以使用Per-Route Guard，其中您将拥有特定于该路线的beforeEnter块。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // code here will be executed only for /foo route
      }
    }
  ]
})

您可以查看vue-hackernews示例小型vue应用程序，该应用程序会破坏其中的许多功能。

使用Vue Laravel为所有路由运行resources / assets / js / app.js代码

2 个答案: