Vue 路由器。绑定数据

Question

我正在开发Vue应用程序，现在我需要使用Vue路由器。但是我在将数据绑定到路由器模板时遇到了一些小问题。请帮帮我。

HTML:

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

脚本：

const Foo = { template: '<div>{{foo}}</div>' }
const Bar = { template: '<div>bar</div>' }


const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})


const app = new Vue({
el: '#app',
  router,
  data: function(){
    return {foo: "asdasdas"}
  }
})

"

{{foo}}绑定不起作用。

示例： https://jsfiddle.net/xgrjzsup/4430/

"

- snowil

Answer 1

来自组件指南：

每个组件实例都有其自己的隔离作用域。这意味着您不能（也不应该）在子组件的模板中直接引用父数据。可以使用props将数据传递给子组件。

Foo是通过路由器设置为您应用程序的子组件之一。

一种从父组件向子组件传递数据的方法是使用props。

修改您的Foo定义以接受一个foo属性：

const Foo = { 
    props: ['foo'],
    template: '<div>{{foo}}</div>' 
}

在模板中绑定父级属性。

<router-view :foo="foo"></router-view>

更新后的示例代码：https://jsfiddle.net/xgrjzsup/4431/

- nikoshr

---

谢谢！还有一个问题。非常希望得到答案。 1）在这种情况下，我应该如何使用不简单的对象？例如{prop1:{prop1_1:"123", prop1_2:"321"}, prop2: "asd" ..etc} 2）在重定向到新路由之前，如何集成一些ajax请求。例如，我们点击“foo”链接，在重定向之前，我们发出请求以获取要绑定的对象。 - snowil

我读到对于非简单对象，可以使用data()。但是在路由跳转之前获取数据怎么办？我能在不使用vuex的情况下做到这一点吗？ - snowil

非常有用的例子！正是我在寻找的。谢谢。 - marlar

Answer 2

在您的情况下，有两种方法可以访问那个“foo”变量。

{{$parent.foo}}
{{$root.foo}}

但是考虑在您的应用程序中使用Vuex来共享数据-https://github.com/vuejs/vuex 或将该foo作为参数传递给路由-https://router.vuejs.org/en/essentials/passing-props.html

- Sergei Kutanov

---

我点赞了这个答案，因为它实际上很有用，可以了解$parent和$root。然而，你应该加上这是一个hacky的解决问题的方式，尽管它确实有效。 - marlar

Answer 3

当然不起作用。你必须在使用的模板上设置数据。

在你的情况下：

const Foo = {
  template: '<div>{{foo}}</div>',
  data () {
    return {
      foo: 'magic'
    }
  }
}

祝福并愿你编程愉快。

- user1497119