Question

尝试通过Vue路由器导入Vue组件时，我一直收到此错误。

这是我的main_app.js：

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Home = { template: '<div>Home</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  {
    path: '/home',
    component: () => import('./list.vue')
  }
]
const router = new VueRouter({
  routes, 
  // mode: 'history'
})

const app = new Vue({
  router
}).$mount('#app')

这是我的list.vue：

<template>
    <div id="right"></div>
</template>

<script>
    export default {
    name: 'list',
    data: function () {
        return {
            text: 'some-text'
        }
    }
}
</script>

尝试进行此更改，但没有成功，我回复了。

const router = new VueRouter({
  routes, // short for `routes: routes`
  // mode: 'history'
  output: {
    path: '/js',
    filename: '[name].js',
    chunkFilename: 'js/[id].[chunkhash].js',
    publicPath: '/',
  },
})

谢谢。

Answer 1

就目前而言，我尝试了此方法并奏效。不确定这是否是完美的解决方案。

我将代码更改为此。

list.vue

export default {
    name: 'list',
    data: function () {
        return {
            text: 'some-text'
        }
    },
    template: '<template>    <div id="right"></div> </template>',
}

vue-router：无法解析异步组件默认值：语法错误：意外的令牌<

1 个答案: