vue-router、動的IDのルートを更新できません

Question

私のvue-routerに問題があります。ルータの一部をコピーして表示し、ルータビューを使用しているコンポーネントの一部もコピーしました。ご覧のとおり、私は小道具が$ router.paramsを渡す高度な方法だと私が理解しているので、小道具を使用しています。また、これはネストされたルータビューです。入れ子になったルートとの間でやりとりすることはできますが、リフレッシュをクリックすると、コンソールでこれらのエラーが発生します。

は、「リソースの読み込みに失敗しました：サーバーは、（見つかりません）404の状態で応答し、」誰が助けることができる場合、私は疑問に思って

「http://localhost:8080/distilleries/1/dist/build.jsネット:: ERR_ABORTEDをGET」

。 vue-router docsから

{ 
    path: '/distilleries/:id', 
    component: Distillery, 
    props: true, 
    children: [ 
    { 
     path: '', 
     component: DistilleryAbout, 
     name: 'DistilleryAbout', 
     props: true 
    }, 
    { 
     path: 'spirits', 
     props: true, 
     component: DistilleryProducts, 
     name: 'DistilleryProducts' 
    }, 
    { 
     path: 'awards', 
     props: true, 
     component: DistilleryAwards, 
     name: 'DistilleryAwards' 
    }, 
    { 
     path: 'reviews', 
     props: true, 
     component: DistilleryReviews, 
     name: 'DistilleryReviews' 
    }, 
    { 
     path: 'recipes', 
     props: true, 
     component: DistilleryRecipes, 
     name: 'DistilleryRecipes' 
    }, 
    { 
     path: 'media', 
     props: true, 
     component: DistilleryMedia, 
     name: 'DistilleryMedia' 
    } 
    ] 
} 

<v-flex xs12> 
    <v-toolbar class="lb" flat> 
     <v-toolbar-items style="margin: 0 auto"> 
     <v-layout row wrap> 
      <v-flex xs6 md12 class="mt-3"> 
      <router-link 
        tag="span" 
        v-for="items in menuItems" 
        :key="items.id" 
        class="itemsButton ma-3 pa-3 cb" 
        :to="{ name: items.link }" 
        >{‌{ items.title }} 
      </router-link> 
      </v-flex> 
     </v-layout> 
     </v-toolbar-items> 
    </v-toolbar> 
    <router-view :distillery="distillery"></router-view> 
    </v-flex> 

Answer 1

：

我々のアプリは、単一のページのクライアント側のアプリですので、彼らは彼らのブラウザで直接 http://oursite.com/user/idにアクセスする場合、適切な サーバー設定なしで、ユーザーが404エラーになりますが。今は醜いです。

だから、ルータでmode: 'history'を追加する必要があります。

const router = new VueRouter({ 
    mode: 'history', 
    routes: [...], 
}) 

そしてadd configurationサーバーによって異なります。