以前の作業コンポーネントに戻ると白いページが表示されます

Question

VueJsで私の最初のステップを実行し、vue-routerといくつかのコンポーネントが起動し、vue-cliを使用して適切な足場を取得しています。

<template> 
    <section class="hero is-small is-info"> 
    <div class="hero-head"> 
     <nav class="navbar"> 
     <div class="navbar-brand"> 
      <span class="title is-3" style="margin: 10px 0 0 32px">Title</span> 
     </div> 
     <div class="navbar-menu"> 
      <div class="navbar-end"> 
      <router-link to="welcome" class="navbar-item" active-class="is-active"> 
       <span class="icon is-small"><i class="fa fa-home"></i></span> 
      </router-link> 
      <router-link to="newmails" class="navbar-item" active-class="is-active"> 
       <span class="icon is-small"><i class="fa fa-envelope-open"></i></span> 
      </router-link> 
      <router-link to="settings" class="navbar-item" active-class="is-active"> 
       <span class="icon is-small"><i class="fa fa-cogs"></i></span> 
      </router-link> 
      <router-link to="bugreport" class="navbar-item" active-class="is-active"> 
       <span class="icon is-small"><i class="fa fa-bug"></i></span> 
      </router-link> 
      </div> 
     </div> 
     </nav> 
    </div> 
    </section> 
</template> 

<script> 
export default { 

}; 
</script> 

は、あなたが見ることができるように、異なるビュー間をナビゲートを介して行われる次のよう

import Vue from 'vue'; 
import Router from 'vue-router'; 

import Welcome from '@/components/Welcome'; 
import NewMails from '@/components/NewMails'; 
import Settings from '@/components/Settings'; 
import Bugreport from '@/components/Bugreport'; 


Vue.use(Router); 

export default new Router({ 
    routes: [ 
    { 
     path: '/', 
     name: 'welcome', 
     component: Welcome, 
    }, 
    { 
     path: '/newmails', 
     name: 'newmails', 
     component: NewMails, 
    }, 
    { 
     path: '/settings', 
     name: 'settings', 
     component: Settings, 
    }, 
    { 
     path: '/bugreport', 
     name: 'bugreport', 
     component: Bugreport, 
    }, 
    ], 
}); 

私はナビゲーション・コンポーネントを構築し、次のよう

は、私は、ルータの定義（./router/index.js）を拡張しましたルータはrouter-link elementを使用します。

アプリケーションがロードされると、/ルートがアクティブ化され、WelcomeコンポーネントがDOMに必要に応じて注入されます。さらにnewmailsの間でトグルすると、settingsとbugreportが表示されます。コンポーネントはかなりいいです。

しかし、/パスのwelcomeルートを再度開こうとすると、目的のコンポーネントが正しく注入されません。同じコンポーネントの最初の見た目で見ることができた内容ではなく、空白のページのみが表示されます。アプリのDOMを検査

は、コンポーネントの内容が注入されていないことを示し、代わりに

<div id="app"><!----></div> 

は、私が言及した空白のページにつながる得るすべてです。

開発モードで動作しているにもかかわらず、VueJsはブラウザのコンソールにエラーメッセージを記録しないので、この時点で少し厄介なことになります。 Vueによって無効なHTMLがレンダリングされたときに空白のページが表示されるという似たような問題がいくつか発生しています。そこで、障害のあるコンポーネントと他のコンポーネントを比較し、大きな違いは見つかりませんでした。加えて、私はコンポーネント自体を例えば

export default new Router({ 
    routes: [ 
    { 
     path: '/', 
     name: 'welcome', 
     component: Settings, 
    }, 
    { 
     path: '/newmails', 
     name: 'newmails', 
     component: NewMails, 
    }, 
    { 
     path: '/settings', 
     name: 'settings', 
     component: Settings, 
    }, 
    { 
     path: '/bugreport', 
     name: 'bugreport', 
     component: Bugreport, 
    }, 
    ], 
}); 

これは文字通り同じ効果をもたらします。コンポーネントは最初の訪問時に正しくレンダリング/注入され、別のルート/ビュー/コンポーネントから戻ってくるときにエラー<!---->が発生します。

他のすべてのルートが必要に応じて動作しているので、私はここで間違っていますか？

Answer 1

welcomeの経路を指定していないため、/の場合のみです。

だから、なぜ<router-link to="welcome">は何をしますか？リダイレクトしたり、welcomeルーティングの問題を解決するために、エイリアスのどちらか - 使用

：

はここでカップルのヒントです。 https://router.vuejs.org/en/essentials/redirect-and-alias.html。

別名をお勧めします。

として/ B /のエイリアスがときにユーザーを訪問/ Bを意味し、URLは /Bのままですが、ユーザーは/訪問しているかのようにマッチします。あなた<router-links>

<router-link to="/newmails"> 

理由で絶対パスの代わりに相対パス - 使用

{ 
    path: '/', 
    name: 'welcome', 
    component: Settings, 
    alias: '/welcome' 
} 

あなたは/welcome/home/dadのようなネストされたルートにいると、あなたが<router-link to="newmails">をクリックした場合、それは/welcome/home/newmailsへのルートます/newmails

- ほとんどの場合、vue-routerを使用していて、<div id="app"><!----></div>と表示されているtはおそらく比類のないルートです。

Answer 2

実際には名前付きルートを使用できますが、構文は異なります（toの前にコロンがあることに注意してください）。

<router-link :to="{ name: 'welcome'}">Welcome</router-link> 

参考：Vue Named Routes