[英]How to use paths/urls/routes dynamically in vue.js/laravel components
我正在尝试基于vue.js / laravel编写自己的博客软件以供学习。
我在问自己如何编写vue.js组件,其中的路径/ URL不是硬编码的。 在以下示例中,我有一个后列表组件,该组件列出了数据库中的所有帖子。 json数据由laravel api路由返回(例如/ api / posts)
在清单中,我使用了一个指向laravel视图的链接(例如/ posts / {id}),该链接显示了带有{id}的特定帖子的实际正文。
在laravel的api.php路由文件中,我可以给特定的路由命名,并与route('api.posts.index')
。 我猜这足够动态吗?
Route::get('', 'Api\ApiPostsController@index')->name('api.posts.index');
<post-listing postsview="{{ route('web.posts.show') }}" postsapi="{{ route('api.posts.index') }}"></post-listing>
在我的postsview
组件中,我指的是这些属性postsview
和postsapi
<template>
<div>
<h2 class="title is-2">Recent posts</h2>
<ul>
<li v-for="post in posts['data']" v-bind:key="post.id">
<a :href="postsview + '/' + post.slug" v-text="post.title"></a>
</li>
</ul>
</div>
</template>
<script>
export default {
props: ["postsapi", "postsview"],
data() {
return {
posts: []
};
},
methods: {
getPosts() {
axios.get(this.postsapi).then(response => (this.posts = response.data));
}
},
mounted() {
this.getPosts();
}
};
</script>
有“最佳实践”方法还是至少有更好的方法? 不知何故我对此解决方案不满意,但是缺乏经验,我不知道从哪里开始。
谢谢。
有很多方法可以实现这一点,这是我所知道的一些选择。
1:使用刀片将路线传递到组件
<component route="{{ route('route_name') }}"></component>
2:您可以使用已定义的所有路由保存全局变量。
您可以使用Route::getRoutes()
获取所有路由
并将其添加到前端的window
3:使用图书馆
该库完全满足您的需求。 https://github.com/tightenco/ziggy
如果找到其他选项,请告诉我,这是大多数laravel开发人员的常见问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.