需要一个例子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与其他基于路由的组件

回答

相关问题