具有vue-router的Vue JS无法加载已验证的组件
丹尼尔·瓦格霍恩（Daniel Waghorn）
我正在开发一个Web应用程序，该应用程序将vue-router用于带有Laravel 5后端的SPA。它使用.vue用于运行应用程序组件的文件laravel-elixir-vueify来创建所需的JavaScript。
我已经与Vue一起成功设置了vue-router，并且可以加载与主Vue和Vue路由器实例相同的文件中定义的组件。
但是，当我尝试并需要.vue文件中包含的组件时，问题就来了。尽管browserify / vueify在我检查Vue实例时报告运行成功，但是Vue dev-tools在实例内仅显示匿名组件片段，而在内没有标记router-view。
控制台内部没有错误，尽管看起来外部组件未正确加载。
各种代码和文件的示例如下：
gulpfile.js
...
mix.browserify('dashboard.js');
...
dashboardOverview.vue
<template>
<div>
<h1>Overview</h1>
<img src="//placehold.it/320x100" style="width: 100%; margin-bottom: 15px" alt="Pathway Visualisation" />
</div>
</template>
<script>
export default {}
</script>
凡dashboardOverview.vue位于resources\assets\js\components\dashboardOverview.vue。
主视图
@section('content')
<div id="app">
<h1>Welcome</h1>
<a v-link="{ path: '/activate' }">Activate</a>|
<a v-link="{ path: '/' }">Overview</a>
<router-view></router-view>
</div>
@endsection
以下JavaScript对此进行了补充：
var Vue = require('vue');
var VueRouter = require('vue-router');
Vue.use(VueRouter)
/* Components */
var dashboardOverview = require('./components/dashboardOverview.vue');
var userSetup = require('./components/userSetup.vue');
var App = Vue.extend();
var router = new VueRouter()
Vue.config.debug = true
router.map({
'*': {
component: Vue.extend({template: '<h4>404 Not found</h4>'})
},
'/': {
component: dashboardOverview
},
'/activate': {
component: userSetup
}
})
router.start(App, '#app')
凡dashboard.js位于resources\assets\js\dashboard.js。
丹尼尔·瓦格霍恩（Daniel Waghorn）
我建立了一个最小的测试项目，并成功地实现了我的目标。
最终结果是某些Node程序包具有不兼容的版本，以及不需要的程序包。
我修剪了packages.json文件，然后重新安装了必需的vue，vue-router和laravel-elixir-vueify软件包，以确保所有内容均已正确安装并具有正确的依赖性，并且此后一直有效。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Vue.js 有时无法加载组件
- 2
Vue 3-具有全局组件的“无法解析组件”
- 3
具有相同Vuex存储的多个Vue.js组件
- 4
Vue.js - 具有动态组件的多个事件
- 5
Vue.js：将 router-link-active 添加到为 root 加载的 vue-router 组件
- 6
有条件地将组件导入Vue Router
- 7
在Vue Router中根据路由参数加载不同的组件
- 8
在Vue组件之前加载js
- 9
在Vue组件之前加载js
- 10
在Ionic Vue Modal中打开的Vue组件没有$ route和$ router
- 11
Vue2：如何指定vue-router根组件？
- 12
Vue / Nuxt：如何使组件真正具有动态性？
- 13
具有部分可重用性的 Vue 组件
- 14
在Laravel / Vue.js组件中使用this。$ router
- 15
具有参数的Vue Router动态网段
- 16
如何使用 Vue js 使 Fabric js 具有反应性？
- 17
使用导航守卫的 Vue.js vue-router 问题
- 18
使用vue和vue-router重新加载路由后，从父组件中获取数据
- 19
在Vue.js中渲染具有重复值的数组
- 20
Vue.js计算，使其具有反应性
- 21
Vue.js-具有动态v-if的动态按钮
- 22
Vue.js添加具有动态值的类
- 23
Vue.Js 具有不同类型的多个输入
- 24
如何在Vue 2中创建具有验证功能（如Vuetify）的VForm组件？
- 25
在Vue.js中将router-link设置为带有组件数据的属性
- 26
Vue JS NPM模块已导入组件
- 27
使用Vue.js和vue-router构建SPA时如何销毁组件？
- 28
Laravel 6和Vue.js使用vue-router和axios从子组件更新记录
- 29
v-tab和vue-router重用Vue.js上的组件
我来说两句