Question

我有两个路线组件：

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）动画然后呈现来自该点击路线的数据，例如＆＃39; / products / the-product-title＆＃39;

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

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

提前致谢!!

Answer 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 }
          ]
        },
    ]
});

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

1 个答案: