如何在laravel 5.3 + VueJs路由中导入外部组件

How to import external components in laravel 5.3 + VueJs Routes

本文关键字:路由 导入 外部 组件 VueJs laravel      更新时间:2023-09-26

我正在使用laravel 5.3 +内置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'),但它不工作,请帮助。

尝试使用vue-router。

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