需要一个示例 vue-router (vue 2.x) 用于 Layout.vue 以及其他基于路由的组件

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 吗？

有人可以 link 使用 vue-router 中的布局创建一个简单的 hello world 吗？

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 尝试帮助我修复它！

需要一个示例 vue-router (vue 2.x) 用于 Layout.vue 以及其他基于路由的组件

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

vue.js

vue-router