Vueリンクをクリックしてもテンプレートが表示されない

Question

私は、1ページのアプリケーションになるLaravel Webサイトを作成しています。私は一般的にjavascriptでの経験があっても、VueJSの新機能です。

/blog/new,/blog/:id、/blog/editなどのいくつかのルートを表示する必要があります。/blog自体はLaravelによって定義され、ブログインデックスとして機能します。

私はvue-routerをインストールして、私が見たいくつかの例に従うことを試みたが、何も起こりません：

app.js

import './bootstrap'; 
import Vue from 'vue'; 
import VueRouter from 'vue-router'; 

const blogIndex = { template: require('./components/blog/index.vue') }; 
const blogNew = { template: require('./components/blog/new.vue')}; 

const routes = [ 
    { 
     path: '/blog', 
     component: blogIndex, 
     name: 'blog-index' 
    }, 

    { 
     path: '/blog/new', 
     component: blogNew, 
     name: 'blog-new' 
    } 
]; 

const router = new VueRouter({ 
    routes, 
    mode: "history" 
}); 

Vue.use(VueRouter); 
Vue.component('example', require('./components/Example.vue')); 
Vue.component('navbar', require('./components/Navbar.vue')); 
Vue.component('blog_index', require('./components/blog/index.vue')); 
console.log(testvar); 

const app = new Vue({ 
    router 
}).$mount('#app'); 

コンポーネント/ブログ/ index.vue

<template> 
    <div> 
     <h1>Blog index</h1> 
     <router-link :to="{ name: 'blog-new' }">New article</router-link> 
     <router-view></router-view> 
    </div> 

</template> 

<script> 
    export default { 
     mounted() { 
      console.log('blog#index mounted'); 
     } 
    } 
</script> 

components/blog/new.vue

<template> 
    <h2>Here is blog/new y'all</h2> 
</template> 

<script> 
    export default { 
     mounted() { 
      console.log('blog#new mounted'); 
     } 
    } 
</script> 

これまでのところ、働く唯一のものは変更されます私のアドレスバーですが、テンプレート自体は（私が/blogから/blog/newに行く）ロードされていないようです。

htmlファイルに<router-view></router-view>を追加する必要があることがわかりましたが、これによってエラーが発生し、VueJSの表示がブロックされます。

私の質問は次のとおりです。何が不足しているのですか、何が間違っていましたか？

は、あなたが新しいルートがにロードされている部分であり、あなたのメインApp.vueファイルに<router-view></router-view>を使用する必要が事前

Answer 1

でいただきありがとうございます。

<template> 
    <router-view></router-view> 
</template> 

あなたは現在あなたがコンポーネント/ブログ/ index.vueでこれを持っている状態 - 私はちょうどあなたのネストされたルートのためであると考えています。 https://router.vuejs.org/en/essentials/nested-routes.html