如何在 laravel 5.3 + VueJs Routes 中导入外部组件答案

【问题标题】：How to import external components in laravel 5.3 + VueJs Routes如何在 laravel 5.3 + VueJs Routes 中导入外部组件
【发布时间】：2017-02-27 06:48:05
【问题描述】：

我正在使用 laravel 5.3 + inbuild VueJs 组件。

现在我想使用路由，所以我使用了下面的代码，但它不起作用。

const NotFound = { template: '<p>Page not found</p>' }
const Page1 = { template: '<p>home page</p>' }
const Page2 = { template: '<p>about page</p>' }
const routes = {
  '/': Page1,
  '/page2': Page2
}

const app = new Vue({
    el: '#app',
    data: {
        currentRoute: window.location.pathname
    },
    computed: {
        ViewComponent () {
          return routes[this.currentRoute] || NotFound
        }
    },
    render (h) { return h(this.ViewComponent) }
});

如何导入Example.vue 代替Page1

我试过require('./components/Example.vue')，但它不起作用，请帮忙。

【问题讨论】：

您尝试const Page1 = require('./components/Example.vue')时出现什么错误？
没有错误，因为 gulp 没有使用此代码运行
如果它没有运行它会抛出一个错误，不是吗？

标签： javascript laravel vue.js laravel-5.3 vue-router

【解决方案1】：

尝试使用 vue-router。

  const router = new VueRouter({
  mode: 'hash',
  base: __dirname,
  routes: [
    { path: '/example',name: 'example', component: require('./example/example.vue') }

  ]
})

【讨论】：