如何将vue-router数据导入父模板?

时间:2017-02-15 18:13:45

标签: javascript vue.js vuejs2 vue-router

我有两个路线组件:

1)人员产品清单组件2)产品详细信息组件

该列表显示了产品,然后在路由器定义/范围中使用历史记录指向该产品的路由器链接。

我想要实现的是将父列表路由中的数据导入子详细信息产品模板。

所以我正在使用vuex,因为我将数据存储在store方法中。下面是我得到的设置的主要例子。

https://gist.github.com/mdunbavan/5cb756ff60e5c5efd4e5cd332dcffc04

PeopleListing组件运行良好,单击路由器链接时会转到正确的URL,vue调试中的数据对于vuex看起来没问题,如下所示:

state:Object
currentProduct:undefined
products:Array[0]
route:Object
from:Object
fullPath:"/products/copy-of-long-shirt-dress-tudor"
hash:""
meta:Object (empty)
name:"product"
params:Object
path:"/products/copy-of-long-shirt-dress-tudor"
query:Object (empty)

我想要做的是基本上渲染数据,以便它仍然显示主页中的路由器数据,而不是看起来它正在进入另一个页面,这正是它目前正在做的事情。我想要创建的旅程如下:

1)索引页面呈现PeopleListing 2)单击它时,在该模板中打开一些动画 3)动画然后呈现来自该点击路线的数据,例如' / products / the-product-title'

在第3点)我们必须尝试从该对象获取所有数据属性。

我可以通过我的要点进行设置吗?

提前致谢!!

1 个答案:

答案 0 :(得分:1)

'product/:handle''/'路由的子路由,因为您想要嵌套它们。
你的路由器应该是这样的。
因为你想使用params将数据传递到你的路线。 当props设置为true时,route.params将被设置为组件道具。

const router = new VueRouter({
  mode: 'history',
  routes: [
        { path: '/', component: PeopleListing, 
          children: [
           { name: 'product', path: '/products/:handle', component: ProductDetail, props: true }
          ]
        },
    ]
});