Vue router with webpack basic example

Question

I'm trying to create a really basic VueRouter example so I can understand how things are working better.

I have the following example:

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>

But nothing seems to show and I'm not sure what I'm missing. I figure I need render but I'm not really sure what object i'd be rendering.

What have I left out?

Answer 1

There are several things wrong here.

First, routes is an array of objects.

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

Second, for clarity, define your router outside of the Vue definition.

const router = new VueRouter({
  routes
})

In your Vue definition, the router must be called router.

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

Finally, in your template for #app, you'll need a <router-view></router-view>.