前提・実現したいこと
LaravelでVue.jsを使用しており、vue-routerを使ってコンポーネントを<router-view>の部分に描画したいと思っています。
具体的には、index.balade.phpに/foo/と/bar/へのrouter-linkを設置。
routes.jsに/foo/と./components/Foo.vue、/bar/と./components/Bar.vueのルーティング設定を記述。
/foo/、/bar/にアクセスするとそれぞれFoo.vue、Bar.vueの中身が描画されることを想定しています。
resources ├── assets │ ├── js │ │ ├── app.js │ │ ├── bootstrap.js │ │ ├── components │ │ │ ├── Bar.vue │ │ │ └── Foo.vue │ │ └── routes.js │ └── sass │ ├── _variables.scss │ └── app.scss └── views └── index.blade.php routes ├── api.php ├── channels.php ├── console.php └── web.php
web.php
<?php Route::get('/{any}', function () { return view('index'); })->where('any', '.*');
index.blade.php
<!DOCTYPE html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>@yield('title')</title> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"> <meta name="csrf-token" content="{{ csrf_token() }}"> }}"> --> </head> <body> <div id="app"> <router-link to="/foo/">Fooへ</router-link> <router-link to="/bar/">Barへ</router-link> <router-view></router-view> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
routes.js
import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter) export default new VueRouter({ mode: 'history', routes: [ { path: '/foo/', components: require('./components/Foo.vue') }, { path: '/bar/', components: require('./components/Bar.vue') } ] });
app.js
import Vue from 'vue' import Vuetify from 'vuetify' require('./bootstrap'); import router from './routes.js' Vue.use(Vuetify) Vue.use(router) window.Vue = require('vue'); const app = new Vue({ router }).$mount('#app');
Foo.vue
<template> <div> <p>Here is Foo</p> <router-link to="/bar/">Bar</router-link> </div> </template> <script> export default { } </script>
Bar.vue
<template> <div> <p>Here is Bar</p> <router-link to="/foo/">Foo</router-link> </div> </template> <script> export default { } </script>
発生している問題
/に表示されている「Fooへ」のリンクをクリックすると、以下のようなConsoleエラーが出ます。
TypeError: Cannot read property '_c' of undefined at render (app.js:67690) at app.js:66768 at app.js:66795 at Array.map (<anonymous>) at app.js:66795 at Array.map (<anonymous>) at flatMapComponents (app.js:66794) at app.js:66730 at iterator (app.js:66937) at step (app.js:66711)
ちなみに、app.js:67690あたりをみると以下のようなかんじです。
/* 45 */ /***/ (function(module, exports, __webpack_require__) { var render = function() { var _vm = this var _h = _vm.$createElement var _c = _vm._self._c || _h // 67690行目 return _c( "div", [ _c("p", [_vm._v("Here is Foo")]), _vm._v(" "), _c("router-link", { attrs: { to: "/bar/" } }, [_vm._v("Bar")]) ], 1 ) } var staticRenderFns = [] render._withStripped = true module.exports = { render: render, staticRenderFns: staticRenderFns } if (false) { module.hot.accept() if (module.hot.data) { require("vue-hot-reload-api") .rerender("data-v-73ca8342", module.exports) } }
原因など検討つきましたらご教授いただけると幸いです。
よろしくお願いいたします。
補足情報
package.json
{ "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.18.0", "bootstrap": "^4.1.1", "cross-env": "^5.1.6", "jquery": "^3.2", "laravel-mix": "^2.0", "lodash": "^4.17.4", "popper.js": "^1.12", "vue": "^2.5.16", "vue-router": "^3.0.1", "vuejs-paginate": "^1.9.1", "vuetify": "^1.0.18" } }
あなたの回答
tips
プレビュー