如何在vue.js / laravel组件中动态使用路径/ URL /路由

Question

出于学习目的，我正在尝试基于vue.js / laravel编写自己的博客软件。

背景

我在问自己如何编写vue.js组件，这些组件中的路径/ URL不是硬编码的。在以下示例中，我有一个后列表组件，该组件列出了数据库中的所有帖子。 json数据由laravel api路由（例如/ api / posts）返回

在清单中，我使用了一个指向laravel视图的链接（例如/ posts / {id}），该链接显示了带有{id}的特定帖子的实际正文。

示例

在laravel的api.php路由文件中，我可以给特定的路由命名，并与route('api.posts.index')一起使用。我猜这足够动态了吗？

api.php

Route::get('', 'Api\ApiPostsController@index')->name('api.posts.index');

index.blade.php

<post-listing postsview="{{ route('web.posts.show') }}" postsapi="{{ route('api.posts.index') }}"></post-listing>

PostListing.vue

在我的Vue组件中，我指的是这些属性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>

问题

是“最佳实践”方法还是至少更好的方法？不知何故我对此解决方案不满意，但缺乏经验，我不知道从哪里开始。

谢谢。

Answer 1

有很多方法可以实现这一点，这是我所知道的一些选择。

1：使用刀片将路线传递到组件

<component route="{{ route('route_name') }}"></component>

2：您可以保存具有定义的所有路由的全局变量。

您可以使用Route::getRoutes()来获取所有路线

并将其添加到前端的window

3：使用库

该库完全满足您的需求。 https://github.com/tightenco/ziggy

如果找到其他选项，请告诉我，这是大多数laravel开发人员的常见问题。