웹 팩이 있는 Vue 라우터 기본 예

웹 팩이 있는 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>

하지만 아무것도 보이지 않는 것 같고 내가 뭘 놓쳤는지 잘 모르겠어.렌더링해야 할 것 같은데 렌더링할 물체가 뭔지 잘 모르겠어.

내가 뭘 빠뜨렸지?

여기에는 몇 가지 잘못된 점이 있다.

첫째로, 경로는 물체의 배열이다.

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

둘째, 명확하게 하기 위해 Vue 정의 외부에 라우터를 정의하십시오.

const router = new VueRouter({
  routes
})

Vue 정의에서 라우터는 호출되어야 함router.

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

마지막으로, 다음에 대한#app, 당신은 a가 필요할 것이다.<router-view></router-view>.

참조URL: https://stackoverflow.com/questions/44708973/vue-router-with-webpack-basic-example