webpackを使ったVueルータの基本的な例

Question

実際の基本的なVueRouterの例を作成しようとしています。

私は、次の例があります。Message.vue

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 
     } 
    }) 
}) 

を

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

<script> 
    export default { 
    } 
</script> 

しかし、何も表示されていないようにみえて、私は私が欠けているかわからないんだけど。私はレンダリングが必要だと思っていますが、どのオブジェクトをレンダリングするのかは分かりません。

私は何を残しましたか？

Answer 1

ここにはいくつかの問題があります。

まず、routesはオブジェクトの配列です。

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

第2に、明確にするために、ルーターをVue定義の外に定義してください。あなたのVueの定義で

const router = new VueRouter({ 
    routes 
}) 

、ルータ必見routerと呼ばれること。

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

最後に、#app用テンプレートで、あなたは<router-view></router-view>が必要になります。