VueJS路由器“无法安装组件:模板或渲染功能未定义." [英] VueJS Router 'Failed to mount component: template or render function not defined.'
问题描述
我正在关注此视频:我的最初问题描述为
My initial problem is described here, but that was resolved. I include it here so you can see what steps I've taken so far.
现在，我收到此警告:[Vue警告]:无法装入组件:模板或渲染函数未定义.
Now, I'm getting this warning: [Vue warn]: Failed to mount component: template or render function not defined.
警告不是很严重，但是路由器视图未显示.也就是说，首页"和关于"链接下方没有任何显示.
A warning is not so bad, but the router-view is not showing up. That is, there is nothing showing up below the Home and About links.
master.blade.php
master.blade.php
<!doctype html>
<html lang="en">
<head>
<title>My App</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
<script src="/js/app.js"></script>
</body>
</html>
Home.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Home Page</div>
<div class="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
任何帮助将不胜感激. 谢谢！
Any help would be appreciated. Thanks!
resources/assets/js/app.js
resources/assets/js/app.js
import './bootstrap';
import router from './routes';
new Vue({
el: '#app',
router
});
resources/assets/js/bootstrap.js
resources/assets/js/bootstrap.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
window.Vue = Vue;
Vue.use(VueRouter);
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
resources/assets/js/routes.js
resources/assets/js/routes.js
import VueRouter from 'vue-router';
let routes = [
{
path: '/',
component: require('./views/Home.vue')
}
];
export default new VueRouter({
routes
});
推荐答案
啊！感谢 TheFallen 的问题，我看到了我的问题.这是我的routes.js文件应如下所示:
Ah! Thanks to TheFallen's questions, I see my problem. Here's what my routes.js file should look like:
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
let routes = [
{
path: '/',
component: Home
}
];
export default new VueRouter({
routes
});
这篇关于VueJS路由器“无法安装组件:模板或渲染功能未定义."的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
