Need an example vue-router (vue 2.x) for a Layout.vue with other route based components

Question

I cannot figure out how to set this up properly using vue-router with vue.js 2.x

I want App.vue to be a main site layout module which contains basic site level things like footer, logo, main nav, etc.

A route based architecture which will load components based on the route inside this App.vue

ie: /things to show list and /things/:id to show individual item

I'm using the webpack template from vue-cli

I'm confused about main.js vs. App.vue should I be moving the routes out of main.js into App.vue?

Can someone link to a simple hello world using layouts in 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')

Check my repo here github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app Take look into layouts directory — Belmin Bedak

Belmin Bedak Belmin Bedak · Accepted Answer · 2016-12-26T21:00:34

I think this should work for you

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

or spread operator

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

As I mentioned in comment, take look at the repo that I created https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app

Need an example vue-router (vue 2.x) for a Layout.vue with other route based components

2 Answers