我想进行Vue.js类似于香草 javascript的重定向

我如何在 Vue.js 中实现这一点？

我想利用 VueJS 组件来清理我的脚本。因此，对于要加载到 Laravel 的每个页面，我都有一个组件。到目前为止一切正常。但是我在将当前的脚本逻辑转移到组件时遇到了问题。

这是导入要使用的组件的当前脚本设置：

main.js

对我来说关键是window.app = new Vue...零件。我使用谷歌地图，因此在加载页面时它会搜索 app.init 方法。这是我在刀片模板中加载的脚本的一部分：

各个页面（我在 Vue 中为每个模块创建的地方）如下所示：

通过定义vueView变量，使用了我在脚本中导入的正确模块。

目标是使用HomeView组件作为主要的谷歌地图视图。以及单击主题中的相应链接时加载的不同页面的其他组件。最后，我不想在一个脚本中包含所有 VueJS 代码。因此模型。

当我传输这个当前 JS 文件的所有内容时，我收到一个错误，抱怨这app.init不是一个函数。该组件如下所示：

如何以某种方式修改我的组件，以使 app.init 加载仍然有效？

概述

在 Vue.js 2.x 中，model.sync将被弃用。

那么，在Vue.js 2.x中的兄弟组件之间进行通信的正确方法是什么？

背景

据我了解 Vue.js 2.x，兄弟通信的首选方法是使用 store 或 event bus。

根据Evan（Vue.js 的创建者）的说法：

还值得一提的是“在组件之间传递数据”通常是一个坏主意，因为最终数据流变得无法跟踪并且很难调试。

如果一条数据需要被多个组件共享，首选 全局存储或Vuex。

[讨论链接]

和：

.once并.sync已弃用。道具现在总是单向下降。为了在父作用域中产生副作用，组件需要显式地显示emit一个事件，而不是依赖于隐式绑定。

因此，Evan 建议使用$emit()and $on()。

关注点

我担心的是：

• 每个store都event具有全局可见性（如果我错了，请纠正我）；
• 每次小交流都新建一个店铺太浪费了；

我想要的是兄弟组件的一些范围 events或可见性。stores（或者也许我不明白上面的想法。）

问题

那么，兄弟组件之间的正确通信方式是什么？

背景：我正在从 1.0 迁移到 2.0。

目前，我正在使用嵌套组件。父母和孩子之间的关系非常好。但是，父组件和主 Vue() 实例之间的关系被打破了。在 Vue() 实例内的计算属性cssstyle中，不会像我期望的那样基于 $emit()/$on() 进行更新。

相关章节：

HTML中父组件的用法：

<f9-padding v-if="editable" ></f9-padding>

父组件内部

在主 Vue() 实例内部

父级内部的计算属性更新得很好。然而，主 Vue() 实例内部的计算属性仅在页面加载时运行。我不明白如何从不使用<input>元素的父级发出数据。我在网站上找到的大多数示例都只关注<input>案例。我刚刚计算的属性数据发生了变化。我尝试使用此处显示的方法：http://rc.vuejs.org/guide/components.html#Custom-Events，但我对本文档的担忧是它谈论的是组件之间的事件侦听而不是父级组件和主 Vue() 实例。

更新：我能够通过将父级上的计算属性更改为此来解决此问题：

并将 cssstyle 从计算数据移动到根 Vue() 实例中的数据。

但是，我觉得使用有点脏：

this.$root.cssstyle

难道没有别的办法了吗？

在这张票中，我们可以通过以下方式在路由更改时将参数传递给组件

我的问题是如果我们需要将不同的道具传递给不同的路由组件，例如，propForB 属性将具有BData， propForC属性将具有CData

如何做到这一点？特别是在vuejs2.0？

在 vue 1 中，我正在这样做：v-bind:class='{"isdanger": invalidLogin}'.

现在我试图在 Vue 2 应用程序中做同样的事情，但我收到了这个错误：

template syntax error - invalid expression: v-bind:class="{'isdanger': invalidLogin}"

我正在使用pug，以防万一。

有任何想法吗？

我正在使用 Vue 2.0-rc.6（目前最新）和 Vue-router 2.0-rc.5（目前最新）。

我尝试this.$emit('custom-event')在我的一个路由器组件和this.$on('custom-event', () => { console.log('I heard an event') })我的 Vue 实例中执行此操作，但未监听该事件。路由器组件本身听到了事件，但没有听到 Vue 实例。

任何的想法？

看看这个jsfiddle。

使用Vue (^2.0.0-rc.6) + Browserify，入口点是 index.js：

应用程序.vue：

你好.vue：

空白屏幕，我错过了什么吗？

编辑：

条目 html 只是<div id="root"></div>，控制台日志上没有错误，我很确定 Hello.vue 已加载，因为console.log('test')该文件出现在控制台上。

编辑2：

发现错误：

[Vue 警告]：您正在使用仅运行时构建的 Vue，其中模板选项不可用。要么将模板预编译为渲染函数，要么使用包含编译器的构建。（在匿名组件中找到 - 使用“名称”选项以获得更好的调试消息。）

这是否意味着我必须使用 webpack 解决方案？不能使用标准 HTML？

解决方案：从 'vue/dist/vue.js' 导入 Vue

//店铺

//零件

//看法

//错误

我有一个相当重的组件，我想异步加载它，同时在加载时向用户显示加载微调器。

这是我的第一次尝试，使用loadingdefined indata链接到带有v-if="loading". 不幸的是，这不起作用，因为 Vue 似乎没有this为内部函数正确重新绑定components-

我还找到了一些 Vue 1.0 示例，但它们依赖于$refs- 在 2.0$refs中不再是响应式的，并且不能用于此目的。剩下的唯一方法是让子组件本身在其挂载生命周期事件上对应用程序数据状态执行某些操作以删除加载微调器，但这似乎有点繁重。有一个更好的方法吗？