2017-09-16 2 views
0

단일 페이지에서이 작업을 수행 할 수 있습니다. 내가 렌더링 할 수없는 곳에 vue-router를 소개합니다.vue-router를 사용할 수 없습니다.

다음은 내 앱입니다. main.js에서 - 일부 샘플 텍스트와 약간의 수정으로 App.js를 반환하면 아무런 문제없이 잘 렌더링됩니다. Vue-router를 설치하는 방법과 관련이있는 것 같습니다. 내 환경에도 콘솔 오류가 없습니다.

define(function(require) { 
    'use strict'; 
    var Vue = require('vue'); 
    var VueRouter = require('vue-router'); 
    var App = require('app'); 

    var Foo = { template: '<div>oijsdfoijsdoifjdsf</div>' } 
    var Bar = { template: '<div>bar</div>' } 

    Vue.use(VueRouter); 

    var routes = [ 
     { path: '/aaa', component: Foo }, 
     { path: '/bbb', component: Bar } 
    ] 

    var router = new VueRouter({ 
     routes: routes 
    }); 

    return new Vue({ 
     el: '#vue', 
     router: router, 
     render: function(h) { 
      h(App); 
     } 
    }); 
}); 

//main.js 내 경험에서

define(function(require) { 
    'use strict'; 

    var Vue = require('vue'); 

    return new Vue({ 
     template: '<div id="vue"><router-view></router-view></div>' 
    }); 
}); 
+0

콘솔에 오류가 있습니까? –

답변

0

을 app.js, 당신은 당신의 라우터 구성을 변경할 수 있습니다

const router = new VueRouter({ 
    base: __dirname, // or '/' 
    routes: routes 
}) 
0

당신은 정의하지 않은 루트 루트, 예. /. 따라서 /에 렌더링되는 구성 요소는 표시되지 않습니다. /aaa으로 이동하여 볼 수 있습니까? 또한 해당 경로 구성 요소를 Vue.component에 전달하면 안됩니까?

관련 문제