Javascript Vue路由器。绑定数据

我正在开发vue应用程序，现在我正准备何时使用vue路由器。 但我有一个小问题，数据绑定到路由器模板

<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>

请帮帮我

<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>

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>

你好应用程序！

去福
去酒吧

<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>

脚本：

<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"}
  }
})

constfoo={template:'{{{Foo}}}
常量条={template:'Bar'}
常数路由=[
{路径：'/foo'，组件：foo}，
{路径：'/bar'，组件：bar}
]
常量路由器=新的VueRouter({
路线
})
const app=新的Vue({
el:“#应用程序”，
路由器，
数据：函数（）{
返回{foo:“asdasdas”}
}
})

{{foo}}

绑定不起作用

<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>

实例：

---

在您的案例中，有两种方法可以访问“foo”变量

<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>

<>但请考虑使用VUEX来共享应用程序中的数据

---

或者将该foo作为参数传递给route-

Ofc，因为它不起作用。您必须在使用的模板上设置数据

<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>

就你而言：

<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>',
  data () {
    return {
      foo: 'magic'
    }
  }
}

const Foo={
模板：“{foo}}”，
数据（）{
返回{
傅：“魔术”
}
}
}

干杯和快乐编码。

来自：

<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>

每个组件实例都有自己的独立作用域。这意味着你 不能（也不应该）直接引用子对象中的父数据 组件的模板。数据可以传递给子组件 使用道具

<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>

而

Foo

是通过路由器设置的应用程序的子组件

<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>

将数据从父级传递到子级的一种方法是使用道具

<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>

修改

Foo

定义以接受

Foo

属性：

<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>

constfoo={
道具：['foo']，
模板：“{{foo}}”
}

并绑定模板中的父属性

<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>

---

更新的小提琴：

谢谢！还有一个问题。非常希望得到答案。1） 在这种情况下，我应该如何使用非简单对象？例如，

{prop1:{prop1_1:“123”，prop1_2:“321”}，prop2:“asd.”等

2）我如何在重定向到新路由之前集成一些ajax请求。例如，我们单击“foo”链接，在重定向之前，我们请求绑定get对象。但在出发前获取数据又如何呢？没有vuex我可以这样做吗？非常有用的例子！这正是我想要的。谢谢。我对这个答案投了赞成票，因为了解$parent和$root实际上很有用。然而，您可能应该补充一点，这是一种解决问题的黑客方法，尽管它确实有效。

<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>