如何使用vue-路由器正确设置main.js和layout.vue
如何使用vue-路由器正确设置main.js和layout.vue
提问于 2020-02-06 19:48:12
伙计们，今天好，
我正在试验rails 6(webpack)和vue js。然而，我发现很难在我的layout.vue组件中设置“路由器-视图”元素。我不确定这是否与涡轮机有关，还是我做错了什么。任何帮助都将不胜感激。
首先是index.html.erb，它只是一个带有webpacker标签来加载main.js的索引页面。
<%= javascript_pack_tag 'main' %>
<div id='hello'>
</div>接下来是main my main.js
import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import router from 'router'
import Layout from 'layout.vue'
Vue.use(TurbolinksAdapter)
document.addEventListener('turbolinks:load', () => {
new Vue({
router: router,
render: h => h(Layout)
}).$mount('#hello')
})接下来是我的router.js.
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{
path: '/',
name: 'layout',
component: Vue.component('Layout', require('layout.vue')),
children: [
{ path: 'test', name: 'test', component: Vue.component('Test', require('app.vue')) }
]
}
]
})最后是layout.vue，这里是爆炸的地方
<template>
<div id='app'>
<div class='container-fluid'>
<div class='wrapper'>
<sidebar></sidebar>
<router-view/>
</div>
</div>
</div>
</template>
<script>
import Sidebar from 'sidebar.vue'
export default {
data: function () {
return { message: "Testing"
}
},
components: {Sidebar}
}
</script>我得到的错误是
[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly?
found in Layout> at app/javascript/layout.vue回答 1
Stack Overflow用户
发布于 2020-02-06 23:19:32
在注册之前，您应该导入布局和其他组件。假设组件vue文件位于根级：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from './layout.vue'
import Test from './test.vue'
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{
path: '/',
name: 'layout',
component: Layout,
children: [
{ path: 'test',
name: 'test',
component: Test
}
]
}
]
})希望它适合你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60102474
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号