需要一個例子VUE路由器（VUE 2.X）的Layout.vue與其他基於路由的組件

我無法弄清楚如何設置此使用vue-router與vue.js 2.X正確需要一個例子VUE路由器（VUE 2.X）的Layout.vue與其他基於路由的組件

我想App.vue是一個主站點佈局模塊包含了像頁腳，徽標，主導航等基本的站點層次的東西

基於路由架構，將根據這裏面App.vue

路線上加載組件

ie：/things顯示列表和/things/:id顯示單個項目

我使用的是從vue-cli

中的WebPack模板我感到困惑main.js與App.vue我應該搬出main.js的路由到App.vue？

有人可以使用vue-router中的佈局鏈接到簡單的hello世界嗎？

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')

來源

2016-12-26 chovy

檢查我的回購這裏https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app 以考慮佈局目錄 –

我想，這應該爲你工作

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

來源

2016-12-26 21:00:34

正是我一直在尋找除了我得到：'未捕獲的類型錯誤：當我加載頁面時，無法讀取未定義的'匹配'屬性。如果我從'App.vue'中刪除''，錯誤消失，我得到頁眉和頁腳，但沒有內容。 – chovy

您是否已將'＃app' div定義到App.vue中，或者它已被定義爲html文件，php或其他？ –

是'' – chovy

回購我錯了房產名稱：

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

這解決了這個問題。我已經將它導入爲routes而不是router。另一種解決方法是{ router: routes }，但我將該文件重命名爲router，現在一切正常。

非常感謝@belmin希望screenhero試着幫我修復它！

來源

2016-12-27 00:18:31 chovy

需要一個例子VUE路由器（VUE 2.X）的Layout.vue與其他基於路由的組件

回答

相關問題