带有 webpack 基本示例的 Vue 路由器

Question

我正在尝试创建一个非常基本的 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>

但似乎什么也没有显示，我不确定我错过了什么。我想我需要渲染，但我不太确定我要渲染什么对象。

我遗漏了什么？

Answer 1

这里有几处错误。

首先，routes 是一个对象数组。

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

其次，为清楚起见，在 Vue 定义之外定义您的路由器。

const router = new VueRouter({
  routes
})

在您的 Vue 定义中，路由器必须被称为 router。

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

最后，在 #app 的模板中，您需要 <router-view></router-view>。

带有 webpack 基本示例的 Vue 路由器

Vue router with webpack basic example

javascript

frameworks

vue.js

vue-router

vuejs2