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を取得していますか？

EDIT：

さて、私はこの作業を取得するために管理しています。私が今必要なもの

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それを試して、 'const bar = Vue.component（ 'bar'、require（ './ Bar.vue'）;）;'と次に 'router.map（{'/ bar'：{component：Foo}} ） '空白のページを返します – 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コンポーネントの問題

答えて

関連する問題