Vue.js Vue组件问题_Vue.js_Vue Component_Vue Router

Vue.js Vue组件问题

vue.js

Vue.js Vue组件问题,vue.js,vue-component,vue-router,Vue.js,Vue Component,Vue Router,我有这个页面，我想试用带有Vue组件的Vue路由器。我想不出是怎么回事。我收到一个错误uncaughttypeerror:无法读取此行const App=new Vue.extend（{}） <body> <div id="app"> <router-view></router-view> </div> <template id="foo"> <h1>This is h

我有这个页面，我想试用带有Vue组件的Vue路由器。我想不出是怎么回事。我收到一个错误

uncaughttypeerror:无法读取此行const App=new Vue.extend（{}）

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

我现在需要的是将这些模板从index.blade.php提取到它们自己的文件中，如Foo.vue
和Bar.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>

我正在使用Webpack编译资产。
您可以尝试使用vue router v.v2.2.1，您可以查看此官方示例，这里是路由器代码：
<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>

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

如果要创建一些.vue
文件，只需从#foo
和#bar
中获取内容，并根据.vue
文件规范将其插入相关部分：我已经尝试过并使用了const bar=vue.component（'bar'，require（'./bar.vue'）
然后router.map（{'/bar'：{component:Foo}}）
给我一个空白页/bar
正在尝试加载组件Foo
？它不应该是组件：Bar
？