vue-router this。$ routeオブジェクトは、単一のファイルコンポーネントで常に空です。

Question

vue-routerとvue-2.0で1つのファイルコンポーネントを使用していますが、解決できないような問題が発生しています。コンポーネントから呼び出されたthis.$routeオブジェクトは、常に空の値を返します。

Messages.vue

<template> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-8 col-md-offset-2"> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-heading">Post List</div> 
 

 
        <div class="panel-body"> 
 
         <li v-for="item in items"> 
 
          {{ item.message }} 
 
         </li> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</template> 
 

 
<script> 
 
    export default { 
 
     created() { 
 
      console.log(this.$route); 
 
     }, 
 
     mounted() { 
 
      console.log('Component mounted.') 
 
     }, 
 
     data() { 
 
      return { 
 
       items: [ 
 
        {message: 'Foo'}, 
 
        {message: 'Bar'} 
 
       ] 
 
      } 
 
     }, 
 
    } 
 
</script>

App.js

import Vue from 'vue'; 
 
import VueRouter from 'vue-router'; 
 
import Messages from './components/Messages'; 
 

 
Vue.use(VueRouter); 
 

 
const routes = [ 
 
    { path: '/user/get/:id', component: Messages}, 
 
] 
 

 
const router = new VueRouter({ 
 
    routes 
 
}) 
 

 
const app = new Vue({ 
 
    router, 
 
    el: '#app', 
 
    components: { Messages } 
 
});

ご協力いただきますようお願い申し上げます。

Answer 1

これは、ルートビューディレクティブを保持するテンプレートを追加してVueの初期化を変更することで、ルータービューをレンダリングするためにVueに伝えるだけです。

const app = new Vue({ 
    router, 
    el: '#app', 
    template: '<router-view/>', 
    components: { Messages } 
}) 

それはあなたのために働くはずです。

Answer 2

ルートコンポーネントがレンダリングに使用するテンプレートを表すHTMLが含まれていないため、問題の原因を知ることは困難です。

ルートコンポーネントがrouter-viewコンポーネントをレンダリングしている場合、ルートインスタンスはMessagesコンポーネントインスタンスで使用可能になります。ここで

は、セットアップを使用した例です。https://codepen.io/autumnwoodberry/pen/WEBEKd?editors=1010