Vue-Router dies. $ Route-Objekt ist immer leer mit einzelnen Dateikomponenten

Question

Ich verwende einzelne Dateikomponenten mit Vue-Router und Vue-2.0 und ich habe ein Problem, das ich nicht in der Lage zu lösen scheinen. Das Objekt this.$route, das von einer Komponente aufgerufen wird, gibt immer leere Werte zurück.

z.B.

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 } 
 
});

Jede Hilfe wird sehr geschätzt.

Answer 1

Sie müssen Vue hier nur mitteilen, um die Router-Ansichten zu rendern, indem Sie die Vue-Initialisierung ändern, indem Sie eine Vorlage hinzufügen, die die route-view-Direktive enthält.

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

Das sollte es für Sie arbeiten lassen.

Answer 2

Es ist schwierig zu wissen, was das Problem ist, weil Sie nicht den HTML-Code enthalten haben, der die Vorlage darstellt, die die Stammkomponente zum Rendern verwendet.

Wenn Ihre Stammkomponente eine Komponente router-view rendert, sollten die Routenparameter in der Komponenteninstanz Messages verfügbar sein.

Hier ist ein Beispiel mit Ihrem Setup: https://codepen.io/autumnwoodberry/pen/WEBEKd?editors=1010