title: How to use paths/urls/routes dynamically in vue.js/laravel components
body: <p>i'm trying to write my own blog software based on vue.js/laravel for learning purposes.</p>
  
  <h2>Background</h2>
  
  <p>I'm asking myself how i write vue.js components in which the paths/urls are not hard coded. In the following example i have a post-listing component which lists all posts from the database. The json data is returned by a laravel api route (e.g. /api/posts) </p>
  
  <p>In the listing i use a link to a laravel view (e.g. /posts/{id}) which shows the actual body of a specific post with {id}.</p>
  
  <h2>Example</h2>
  
  <p>In laravel's api.php route file i can give a name to a specific route and use it with <code>route('api.posts.index')</code>. That's dynamic enough i guess?</p>
  
  <h3>api.php</h3>
  
  <pre class="lang-php prettyprint-override"><code>Route::get('', 'Api\ApiPostsController@index')-&gt;name('api.posts.index');
  </code></pre>
  
  <h3>index.blade.php</h3>
  
  <pre class="lang-php prettyprint-override"><code>&lt;post-listing postsview="{{ route('web.posts.show') }}" postsapi="{{ route('api.posts.index') }}"&gt;&lt;/post-listing&gt;
  </code></pre>
  
  <h3>PostListing.vue</h3>
  
  <p>In my vue component i refer to these properties <code>postsview</code> and <code>postsapi</code></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h2 class="title is-2"&gt;Recent posts&lt;/h2&gt;
      &lt;ul&gt;
        &lt;li v-for="post in posts['data']" v-bind:key="post.id"&gt;
          &lt;a :href="postsview + '/' + post.slug" v-text="post.title"&gt;&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: ["postsapi", "postsview"],
    data() {
      return {
        posts: []
      };
    },
    methods: {
      getPosts() {
        axios.get(this.postsapi).then(response =&gt; (this.posts = response.data));
      }
    },
    mounted() {
      this.getPosts();
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <h2>The question</h2>
  
  <p>Is there a "best-practice" way or at least a better approach? Somehow i'm not happy with this solution, but lacking experience, i don't know where to begin.</p>
  
  <p>Thanks.</p>