Javascript 带有网页包的Vue路由器基本示例

我正在尝试创建一个真正基本的VueRouter示例，以便更好地理解事情是如何运行的

我举了以下例子：

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>

消息
导出默认值{
}

但似乎什么都没有表现出来，我也不确定我错过了什么。我想我需要渲染，但我不确定渲染的对象是什么

---

我遗漏了什么？

这里有几处地方不对劲

首先，routes是一个对象数组

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

其次，为了清晰起见，请在Vue定义之外定义路由器

const router = new VueRouter({
  routes
})

在Vue定义中，路由器必须称为

router

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

---

最后，在

#app

的模板中，您需要一个

实际上，您只是忘记了添加“path”作为“/”的键。它应该类似于“{path:'/'，component:Message}”