Блог

Главная - Вопросы по программированию - Как импортировать внешние компоненты в laravel 5.3 Маршруты VueJS

Как импортировать внешние компоненты в laravel 5.3 Маршруты VueJS

#javascript #laravel #vue.js #laravel-5.3 #vue-router

#javascript #laravel #vue.js #laravel-5.3 #vue-маршрутизатор

Вопрос:

Я использую 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') , но это не работает, пожалуйста, помогите.

Комментарии:

1. В чем была ошибка при попытке const Page1 = require('./components/Example.vue') ?

2. Нет ошибки, потому что gulp не запускается с этим кодом

3. Если он не запущен, он выдает ошибку, не так ли?

Ответ №1:

Попробуйте использовать vue-router.

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

  ]
})