Компонент Laravel 5.3 vue 2 не отображается
Я использую Laravel 5.3 с Vue 2 и Vue Router, но мой компонент не виден. Фу и Бар работают.
Вот мой App.js
/**
* Load JavaScript dependencies
*/
require('./bootstrap');
/**
* Import Vue and VueRouter
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
/**
* Import Components
*/
import UsersIndex from './components/users/Index.vue'
import Example from './components/Example.vue'
/**
* Use VueRouter
*/
Vue.use(VueRouter)
/**
* Define components
*/
const Foo = { template: '<div>Foo</div>' }
const Bar = { template: '<div>Bar</div>' }
/**
* Create Router
*/
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{
path: '/users',
components: {
component: UsersIndex
}
}
]
})
/**
* Create Vue instance and inject router
*/
new Vue({
router
}).$mount('#app')
Я не получаю никакой ошибки в инструментах разработчика vuejs. Но мой Компонент UsersIndex не виден.
Любая идея?
Обновить
Если я попробую
{
path: '/users',
component: UsersIndex
}
Я получаю следующее предупреждение Vue
[Vue warn]: Не удалось смонтировать компонент: шаблон или функция визуализации не определены.Решение
Обычный способ сделать это — иметь один шаблон компонента для каждого маршрута, который представляет всю страницу, вы, кажется, вкладываете компонент в components объект, однако, если вы не используете именованные виды, так должно быть:
{
path: '/users',
component: UsersIndex
}
Теперь должен отобразиться UserIndex, вот скрипка:
https://jsfiddle.net/1sjvto79/
Вот пример с именованным представлением, если это то, к чему вы стремились, оно просто предназначается для представления маршрутизатора с тем же именем, что и атрибут компонента:
components: {
users: UsersIndex
}
тогда в вашей разметке:
<router-view name="users"></router-view>
Вот скрипка:
Другие решения
Других решений пока нет …