帶有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

這裏有幾個錯誤。

首先，路由是一個對象數組。

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

其次，爲了清楚起見，定義了Vue的定義之外路由器。

const router = new VueRouter({ 
    routes 
}) 

在你Vue的定義中，路由器必須被稱爲router。

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

最後，在你的模板#app，你需要一個<router-view></router-view>。