Question

我无法弄清楚如何使用vue-router与vue.js 2.x

正确设置

我希望App.vue成为一个主要的网站布局模块，其中包含基本的网站级别内容，如页脚，徽标，主导航等。

基于路由的体系结构，它将根据此App.vue中的路由加载组件

ie：/things显示列表，/things/:id显示单个项目

我正在使用vue-cli

中的网络包模板

我对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希望在屏幕上试图帮我修复它！

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

2 个答案: