Question

我有这个页面我想用Vue组件试用Vue Router。我不知道什么是错的。我在此行Uncaught TypeError: Cannot read property 'name' of undefined收到错误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>

我做错了什么？

修改

好的，我已经设法让这个工作。

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编译资产。

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

Vue组件问题

1 个答案: