如何使用vue-router params

我是vue现在使用其路由器的新手。我想导航到另一个页面，我使用下面的代码：如何使用vue-router params

this.$router.push({path: '/newLocation', params: { foo: "bar"}});

然后，我希望它是在新的组件

this.$route.params

这是行不通的。我也试过：

this.$router.push({path: '/newLocation'}); 
this.$router.push({params: { foo: "bar"}});

我检查源代码了一下，注意到了这个属性，都会有新的对象覆盖{}。

我想知道的是params使用是不是我认为？如果没有，如何使用它？

在此先感谢

来源

2017-07-25 Gal Ziv

是不是很普遍认为结合特性的路由器的反模式？

这是一个更干的解决方案，让他们绑定到它自己的组件，我真的相信Vue路由器。请参阅：https://router.vuejs.org/en/essentials/passing-props.html有关此处最佳做法的更多信息

您是否可以尝试接受组件的props属性：[]属性？你可以看到如何做到这一点：https://vuejs.org/v2/guide/components.html#Props

如果您有任何问题，请不要弹出！乐意进一步帮助。

来源

2017-07-25 07:24:10 ExohJosh

我想通过PARAMS表格视图之间。听起来对我好。当给路由一个名字然后执行'this。$ router.push（{path：'/ newLocation'，name：'newRouteName'，params：{foo：“bar”}}）;'做了诀窍，现在我可以通过以下方式访问我的新加载视图上的参数：this。$ route.params。感谢您的时间和精力！ –

还有一件事，我不明白为什么它必须命名它的工作。你有好主意吗？ –

既然你想传递PARAMS到你的路由对象的路径属性应该有:然后在你的params对象键的名字表示的动态段各路线的组成部分

所以你的路线应和

routes: [ 
    {path: '/newLocation/:foo', name: 'newLocation', component: newComponent} 
]

那么对于导航程式设计的组件，你应该做的：

this.$router.push({name: 'newLocation', params: { foo: "bar"}});

请参阅我正在使用name而不是path，因为您正在通过属性params传递参数。

如果wamt使用path那么就应该是：

this.$router.push({path: '/newLocation/bar'});

由路径接近PARAMS会自动映射到相应的字段上$route.params。现在

如果你console.log(this.$route.params)在新的组件，你会得到对象：{"foo": "bar"}

来源

2017-07-25 08:38:17

如何使用vue-router params

回答

相关问题