[英]Need an example vue-router (vue 2.x) for a Layout.vue with other route based components
I cannot figure out how to set this up properly using vue-router
with vue.js 2.x 我无法弄清楚如何使用
vue-router
和vue.js 2.x正确设置此设置
I want App.vue to be a main site layout module which contains basic site level things like footer, logo, main nav, etc. 我希望App.vue成为主站点布局模块,其中包含基本站点级别的内容,如页脚,徽标,主导航等。
A route based architecture which will load components based on the route inside this App.vue 基于路由的体系结构将基于此App.vue中的路由加载组件
ie: /things
to show list and /things/:id
to show individual item 即:
/things
显示列表, /things/:id
显示单个项目
I'm using the webpack template from vue-cli
我正在使用
vue-cli
的webpack模板
I'm confused about main.js vs. App.vue should I be moving the routes out of main.js into App.vue? 我对main.js与App.vue感到困惑,是否应该将路由从main.js移至App.vue?
Can someone link to a simple hello world using layouts in vue-router? 有人可以使用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')
I think this should work for you 我认为这应该为您工作
const app = new Vue({
router,
render: (h) => h(App)
}).$mount('#app')
or spread operator 或散布运算符
const app = new Vue({
router,
...App
}).$mount('#app')
As I mentioned in comment, take look at the repo that I created https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app 正如我在评论中提到的,请看一下我创建的回购https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app
I had wrong property name: 我的属性名称错误:
new Vue({
router,
...App
}).$mount('#app')
This fixes it. 这样就解决了。 I had imported it as
routes
not router
. 我已经将其导入为
routes
而不是router
。 Another way to fix would have been { router: routes }
but I renamed the file to router
and now everything works. 解决该问题的另一种方法是
{ router: routes }
但我将文件重命名为router
,现在一切正常。
Big thanks to @belmin for hoping on screenhero to try and help me fix it! 非常感谢@belmin希望screenhero尝试帮助我解决它!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.