Vue 路由器与 webpack 基本示例答案

【问题标题】：Vue router with webpack basic exampleVue 路由器与 webpack 基本示例
【发布时间】：2017-11-26 07:09:30
【问题描述】：

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

消息.vue

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

<script>
    export default {
    }
</script>

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

我遗漏了什么？

【问题讨论】：

实际上，您只是忘记添加“路径”作为“/”的键。它应该像“{path:'/',component:Message}

标签： javascript frameworks vue.js vuejs2 vue-router

【解决方案1】：

这里有几个问题。

首先，路由是一个对象数组。

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

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

const router = new VueRouter({
  routes
})

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

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

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

【讨论】：