Нужен пример vue-router (vue 2.x) для Layout.vue с другими компонентами на основе маршрута

Я не могу понять, как это правильно настроить, используя vue-router с vue.js 2.x

Я хочу, чтобы App.vue был основным модулем макета сайта, который содержал основные элементы уровня сайта, такие как нижний колонтитул, логотип, основная навигация и т. Д.

Архитектура на основе маршрута, которая будет загружать компоненты на основе маршрута внутри этого App.vue

например: /things для отображения списка и /things/:id для отображения отдельного элемента

Я использую шаблон веб-пакета от vue-cli

Я не понимаю, что такое main.js и App.vue, нужно ли перемещать маршруты из main.js в App.vue?

Может ли кто-нибудь создать ссылку на простой привет мир, используя макеты в vue-router?

import Vue from 'vue'
import App from './App'
import Items from './components/Items'
import Item from './components/Item'
import Axios from 'axios'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
Vue.prototype.$http = Axios

const routers = new VueRouter([
  { path: '/items/:id', component: Item },
  { path: '/', component: Items }
])

// how to specify App.vue as a layout?
new Vue({
  routes
}).$mount('#app')

vue.js vue-router
person chovy    schedule 26.12.2016    source источник
comment
Проверьте мое репо здесь github.com/bedakb/vuewp/ tree / master / public / app / themes / vuewp / app Загляните в каталог макетов   -  person Belmin Bedak    schedule 26.12.2016

Ответы (2)


arrow_upward
1
arrow_downward

Я думаю, это должно сработать для тебя

const app = new Vue({
    router,
    render: (h) => h(App)
}).$mount('#app')

или оператор распространения

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

Как я уже упоминал в комментарии, взгляните на репо, которое я создал https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app

person Belmin Bedak    schedule 26.12.2016
comment
Именно то, что я искал, за исключением того, что получаю: Uncaught TypeError: Cannot read property 'matched' of undefined при загрузке страницы. Если я удалю <router-view> из App.vue, ошибка исчезнет, ​​и я получу верхний и нижний колонтитулы, но не содержимое. - person chovy; 27.12.2016
comment
Вы определили #app div в App.vue или он определен в html-файле, php или чем-то еще? - person Belmin Bedak; 27.12.2016
comment
да <template> <div id="app"> <header-bar></header-bar> <router-view></router-view> <footer-bar></footer-bar> </div> </template> - person chovy; 27.12.2016
comment
верхний и нижний колонтитулы загружаются, если я удалю <router-view> - person chovy; 27.12.2016
comment
Хорошо, попробуйте переместить этот файл за пределы .vue файла, поэтому сохраните его в основном файле шаблона, клинке или другом - person Belmin Bedak; 27.12.2016
comment
У меня тоже в index.html - person chovy; 27.12.2016
comment
Удалите #app из App.vue и оставьте его только в html файле. - person Belmin Bedak; 27.12.2016
comment
та же ошибка. если я удалю <router-view>, он все равно покажет верхний / нижний колонтитул. - person chovy; 27.12.2016
comment
О, теперь я вижу, вы передаете аргументы конструктору VueRouter немного неправильно - проверьте, как я это сделал здесь, и сравните с вашими, и вы увидите проблему github.com/bedakb/vuewp/blob/master/public/app/themes/vuewp/app / - person Belmin Bedak; 27.12.2016
comment
Так должно быть const router = new VueRouter({ routes: [{ path: '/items/:id', component: Item }, { path: '/', component: Items }] }) - person Belmin Bedak; 27.12.2016
comment
Я делаю то же самое, что и ты. gist.github.com/anonymous/a52df5dc3954614645f14d1f9b014ce4 и gist.github.com/anonymous/6405be0b6a3e5c0ef6f8073bfc7a909e - person chovy; 27.12.2016
comment
Хм, я думаю, эта строка здесь может быть проблемой, может быть import App from './App' вы забыли установить .vue расширение, но не совсем уверен, довольно странная ошибка для них - person Belmin Bedak; 27.12.2016
comment
Если я загружаю <things> внутри App.vue, он работает. Но я не этого хочу. Я хочу внедрить компонент в App.vue на основе маршрута. Я вижу, что у вас есть ./views слой каталогов, который мне не нужен. - person chovy; 27.12.2016
comment
Извините, но я не понимаю - <router-view> будет обрабатывать всю информацию о внедрении компонентов. Представления в моей структуре - это компоненты, которые прикреплены к определенным маршрутам, вы можете вызвать его и назначить любой компонент, который вы хотите, конкретному пути маршрута. - person Belmin Bedak; 27.12.2016
comment
у вас есть этот компонент представления, который вызывает <my-component> У меня его нет. - person chovy; 27.12.2016
comment
Ты в скайпе? Aettinger - person chovy; 27.12.2016
comment
Исправлено: new Vue({ router, ...App }).$mount('#app') Я назвал это routes не router - person chovy; 27.12.2016

arrow_upward
1
arrow_downward

У меня неправильное имя свойства:

new Vue({
  router,
  ...App
}).$mount('#app')

Это исправляет. Я импортировал его как routes, а не router. Другой способ исправить это { router: routes }, но я переименовал файл в router, и теперь все работает.

Большое спасибо @belmin за то, что надеялся, что screenhero попытается помочь мне это исправить!

person chovy    schedule 27.12.2016