Vue 组件问题答案

【问题标题】：Vue Component IssueVue 组件问题
【发布时间】：2017-03-15 10:05:59
【问题描述】：

我有这个页面，我想用 Vue 组件试用 Vue 路由器。我不知道出了什么问题。我在这行const App = new Vue.extend({}) 收到错误Uncaught TypeError: Cannot read property 'name' of undefined

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

我做错了什么？

编辑：

好的，我已经设法让它工作了。

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

我现在需要将这些模板从 index.blade.php 提取到它们自己的文件中，例如 Foo.vue 和 Bar.vue。我该怎么做？

我正在使用 Webpack 编译资产。

【问题讨论】：

如果要创建一些.vue 文件，只需将#foo 和#bar 的内容按照.vue 文件规范插入到相关部分：vue-loader.vuejs.org/en/start/spec.html
我试过了，用了const Bar = Vue.component('bar', require('./Bar.vue'););，然后router.map({ '/bar': { component: Foo } })给了我一个空白页
/bar 正在尝试加载组件Foo？不应该是component: Bar吗？

标签： vue.js vue-component vue-router

【解决方案1】：

您可以尝试使用 vue-router v.v2.2.1，您可以查看这个官方示例https://github.com/vuejs/vue-hackernews-2.0 和这里的路由器代码：

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

【讨论】：