Question

伙计们，

我正在尝试使用Rails 6（webpack）和vue js。但是，我发现很难在我的layout.vue组件内设置“ router-view”元素。我不确定是否与turbolinks有关，或者我做错了什么。任何帮助将不胜感激。

所以首先是 index.html.erb ，它只是一个带有webpacker pack标签的索引页面，用于加载main.js

 <%= javascript_pack_tag 'main' %>
 <div id='hello'>
 </div>

接下来是我的 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

Answer 1

您应该在注册之前导入布局和其他组件。假设组件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 
                 }
            ]
        }
    ]
})

希望它适合您。

如何使用vue-router正确设置main.js和layout.vue

1 个答案: