nuxt.js - ここ<a href="https://nuxtjs.org/examples/custom-routes" rel="nofollow noreferrer">https://nuxtjs.org/examples/custom-routes</a></p> <p>説明するように>カスタムルートaxiosなしの「ID」

Question

を取得する方法は、だから私のnuxt.jsプロジェクトで、私は私がこれまでに次のようであるimplmentedているどのようなカスタムルートを必要としています。

ファイル：ページ\これはindex.vueファイルにequivelentされるだろう

... 
<nuxt-link v-bind:to="'/trail/' + trail.article_code">{{ trail.article_description }}</nuxt-link> 
... 

trails.vue。私が正しいんだ場合は、追加のコードは、関連する

ファイルで、このファイルではありません：ページは道を\ \ _idだからここに私は念のために、ファイル全体を置く

<template> 
    <div class="vttTrails"> 
     <div class="ui grid centered"> 
      <div v-for="(trail, index) in listTrail"> 
       <div class="ui card"> 
        {{ trail.article_code }} 
       </div> 
      </div> 
     </div> 
    </div> 
</template> 

<script> 
    import feathers from 'feathers/client'; 
    import socketio from 'feathers-socketio/client'; 
    import hooks from 'feathers-hooks'; 
    import io from 'socket.io-client'; 
    import * as process from "../../nuxt.config"; 

    const vttSocket = io(process.env.backendUrl); 
    const vttFeathers = feathers() 
     .configure(socketio(vttSocket)) 
     .configure(hooks()); 

    const serviceArticles = vttFeathers.service('articles'); 

    export default { 
     layout: 'default', 
     data: function() { 
      return { 
       listTrail: [], 
       curLanguage: this.$store.state.site.curLanguage, 
       curCategory: this.$store.state.site.curCategory 
      } 
     }, 
     mounted: function() { 
      return serviceArticles.find({ 
       query: { 
        category_id: this.$store.state.site.curCategory, 
        article_code: '', 
        $sort: { 
         article_rating: 1 
        }, 
        $select: [ 
         'id', 
         ['article_description_' + this.$store.state.site.curLanguage, 'article_description'], 
         'article_length', 
         'article_ascend', 
         'article_code', 
         'article_at', 
        ] 
       } 
      }).then(page => { 
       this.listTrail = page.data; 
      }) 
     }, 
    } 
</script> 

。リンクをクリックすると、 "trail \ cwu"は正しいですが、私はそれを持っています。値 "cwu"はarticle_code: ''に入る必要があります。私はmounted: function(params)をしようとしましたが動作しません。

質問

私は私の「_id.vue」で「paramsは」の部分を得るために行う必要がありますか？最終的に私は選択肢を微調整します。これは1つだけを返します。

Answer 1

大丈夫です。だから私が今行っているのは、 '_id.vue'ファイルのデータ関数を変更することです。現在、次の情報が含まれています：

data: function() { 
      return { 
       listTrail: [], 
       curLanguage: this.$store.state.site.curLanguage, 
       curCategory: this.$store.state.site.curCategory, 
       curTrail: window.location.pathname.split('/')[2] 
      } 
     }, 

正しい方法ではないかもしれませんが、問題なく動作します。