Vue 구성 요소 문제

이 페이지가 있습니다. Vue 구성 요소가 포함 된 Vue Router를 시험해보고 싶습니다. 나는 틀린 것을 밖으로 계산할 수 없다. 나는 내가 뭘 잘못이 라인 const App = new Vue.extend({}) Vue 구성 요소 문제

<body> 
    <div id="app"> 
     <router-view></router-view> 
    </div> 

    <template id="foo"> <h1>This is homepage</h1> </template> 

    <template id="bar"> <h1>This is Bar page</h1> </template> 


</body> 

    //Vue.js v1.0.28 
<script src="{{ asset('js/vue.js') }}"></script> 

// vue-router v0.7.13 
    <script src="{{ asset('js/vue-router.js') }}"></script> 

    <script> 

      const router = new VueRouter() 

      const App = new Vue.extend({}) 

      router.map({ 
       '/': { 
       component: { 
         template: '#foo' 
        } 
       }, 
       '/bar': { 
       component: { 
        template: '#bar' 
       } 
       }, 
      }) 

      router.start(App, '#app') 

    </script> 

</html>

에서 오류 Uncaught TypeError: Cannot read property 'name' of undefined는 무엇입니까?

편집 :

좋아,이 작업을 얻는 것을 처리했다.

const Foo = Vue.component('foo', { template: '#foo' }); 
const Bar = Vue.component('bar', { template: '#bar' }); 

Vue.use(VueRouter) 

const router = new VueRouter() 

router.map({ 
    '/foo': { 
    component: Foo 
    }, 
    '/bar': { 
    component: Bar 
    }, 
}) 

var App = Vue.extend({}) 

router.start(App, 'body')

은 내가 지금 필요한 것은 Foo.vue 및 Bar.vue 같은 자신의 파일에 index.blade.php에서 그 템플릿을 추출하는 것입니다. 어떻게해야합니까?

자산을 컴파일하는 데 Webpack을 사용하고 있습니다.

출처

2016-11-02 Richie

을 '# foo'와'# bar'의 내용을'.vue' 파일 스펙에 따라 관련 섹션에 삽입하십시오 : https://vue-loader.vuejs.org/en/start/spec.html – Bryce

I ('/ bar': {component : Foo}})를 사용하여 'const bar = Vue.component ('bar ', require ('./ Bar.vue ');)'빈 페이지를 제공합니다 – Richie

'/ bar'는'Foo' 구성 요소를로드하려고합니까? '컴포넌트 : 바'가 아니겠습니까? – Bryce

-1

당신은 VUE-라우터 v.v2.2.1를 사용하려고 할 수 있으며, 여기에 라우터 코드이 공식 예 https://github.com/vuejs/vue-hackernews-2.0을 확인 할 수 있습니다 : 당신이 어떤`.vue` 파일을 만들려면 그냥 가지고,

import Vue from 'vue' 
import Router from 'vue-router' 

Vue.use(Router) 

import { createListView } from '../views/CreateListView' 
import ItemView from '../views/ItemView.vue' 
import UserView from '../views/UserView.vue' 

export default new Router({ 
    mode: 'history', 
    scrollBehavior:() => ({ y: 0 }), 
    routes: [ 
    { path: '/top/:page(\\d+)?', component: createListView('top') }, 
    { path: '/new/:page(\\d+)?', component: createListView('new') }, 
    { path: '/show/:page(\\d+)?', component: createListView('show') }, 
    { path: '/ask/:page(\\d+)?', component: createListView('ask') }, 
    { path: '/job/:page(\\d+)?', component: createListView('job') }, 
    { path: '/item/:id(\\d+)', component: ItemView }, 
    { path: '/user/:id', component: UserView }, 
    { path: '/', redirect: '/top' } 
    ] 
})

출처

2017-02-16 11:32:16 duodvk

Vue 구성 요소 문제

답변

관련 문제