Vue Router mit Webpack Basisbeispiel

Question

Ich versuche ein wirklich einfaches VueRouter-Beispiel zu erstellen, damit ich verstehe, wie die Dinge besser funktionieren.

Ich habe folgendes Beispiel:

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

window.Vue = Vue; 
Vue.use(VueRouter); 

import Message from './components/Message.vue'; 

new Vue({ 
    el: '#app', 
    routes: new VueRouter({ 
     '/': { 
      component: Message 
     } 
    }) 
}) 

Message.vue

<template> 
    <div class="">Message</div> 
</template> 

<script> 
    export default { 
    } 
</script> 

Aber nichts scheint zu zeigen, und ich bin nicht sicher, was mir fehlt. Ich denke, ich brauche Render, aber ich bin mir nicht sicher, welches Objekt ich rendern würde.

Was habe ich weggelassen?

Answer 1

Hier sind einige Dinge falsch.

Erstens ist Routen ein Array von Objekten.

const routes = [ 
    {path: "/", component: Message} 
] 

Zweitens, zur besseren Übersicht, definieren Sie Ihren Router außerhalb der Vue-Definition.

const router = new VueRouter({ 
    routes 
}) 

In Ihrer Vue Definition der Router muss router aufgerufen werden.

new Vue({ 
    el: '#app', 
    router 
}) 

schließlich in der Vorlage für #app, benötigen Sie einen <router-view></router-view>.