首页 文章

Vue组件问题

提问于
浏览 次
0

我有这个页面我想用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>

我究竟做错了什么？

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

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

我正在使用Webpack来编译资产 .

vue.js vue-component vue-router

1 回答

  • -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' }
  ]
})
    回复于

相关问题