我正在使用Larvel（最新版本），我正在尝试使用vuejs制作SPA。我在关于vue js的laracast剧集中关注了SPA教程。但是，我有点麻烦。我认为我在routes.js文件中做错了，因为在教程中它说要使组件成为必需（./ views / home）但是require函数没有被解析。
问题是在页面上没有将router-link标记编译为锚标记
Bootstrap.js
import Vue from 'vue';
import axios from 'axios';
import VueRouter from 'vue-router';
window.Vue = Vue;
Vue.use(VueRouter);
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
Router.js
import VueRouter from 'vue-router';
let routes = [
{
path:'/',
component: require('./views/home')
}];
export default new VueRouter({
routes
});
App.js
import './bootstrap';
import router from './routes'
new Vue({
el: '#app',
router
});
home.vue
<template>
<section class="hero is-dark">
<div class="hero-body">
<div class="container">
<h1 class="title">
Primary title
</h1>
<h2 class="subtitle">
Primary subtitle
</h2>
</div>
</div>
</section>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
不
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
@include('partials.head')
<title>My App</title>
</head>
<body class="">
<div class="wrapper">
<div class="content-wrapper">
<div id="app">
<router-link to='/'>Home</router-link>
<router-link to='/about'>About</router-link>
</div>
</div>
</div>
@include('partials.footer')
</body>
</html>
混合
mix.js('resources/assets/js/app.js', 'public/js')
看着你的bootstrap.js，看来你正在做Vue.use(‘VueRouter’)。调用use方法时，需要将它传入您导入的VueRouter对象，而不是字符串文字。