1
私はLarvel（最新バージョン）を使用していますが、vuejsを使用してSPAを作成しようとしています。私はva jsに関するlaracastエピソードのSPAチュートリアルに従った。しかし、私は少し問題があります。チュートリアルでは、コンポーネントが必要（./ views/home）になっていると言いますが、require関数は ではないので、routes.jsファイルで何か間違っていると思います。vueを使用してSPAを作成するときに問題が発生する
問題は、ページ上のルータ-linkタグはアンカータグ
Boostrap.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
});
アプリケーションにコンパイルされていないことです。 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>
NAV
<!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')
あなたの#nav要素を投稿してください...私はそのビットが不足しているようです。 –
@DavidHeremans "nav"要素を含むアプリケーションレイアウトを追加しました – ThatPurpleGuy
あなたのbootstrap.jsにはVue.use（ 'VueRouter'）と書かれています。私はあなたが文字列リテラルではなく、インポートされた変数を使用する必要があると信じています。 –