需要帶有其他基於路由的組件的Layout.vue的示例vue-router（vue 2.x）

Question

我無法弄清楚如何使用vue-router和vue.js 2.x正確設置此設置

我希望App.vue成為主站點布局模塊，其中包含基本站點級別的內容，如頁腳，徽標，主導航等。

基於路由的體系結構將基於此App.vue中的路由加載組件

即： /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')

Answer 1

我認為這應該為您工作

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

Answer 2

我的屬性名稱錯誤：

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

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

非常感謝@belmin希望screenhero嘗試幫助我解決它！