laravel 7 + VueJs開發紀錄 | Vue-router Laravel
參考文件:https://vuex.vuejs.org/zh/[1]https://jigsawye.com/2017/08/30/vuex-module-namespacing/[2]Laravel5.8後需要另外安裝laravel/uicomposerrequirelaravel/uicomposerrequirelaravel/ui這時候可以看到/resource/js/components/ExampleComponent.vue已經產生接著安裝前端路由套件與資料管理套件vue-router,vuex基礎vuerouter設定概念:先將Laravelwebrouter都固定指向同一個page,由此page來生成vue渲染1.修改routs/web.phpRoute::get(/{any},SinglePageController@index)->where(any,.*);2.建立controllerSinglePageContro...
參考文件 : https://vuex.vuejs.org/zh/[1]
https://jigsawye.com/2017/08/30/vuex-module-namespacing/[2]
Laravel 5.8後需要另外安裝laravel/ui
composer require laravel/ui
composer require laravel/ui
這時候可以看到 /resource/js/components/ExampleComponent.vue 已經產生
接著安裝前端路由套件與資料管理套件vue-router , vuex
基礎 vue router 設定
概念 : 先將Laravel web router都固定指向同一個page,由此page來生成vue渲染
1.修改routs/web.php
Route::get(/{any}, SinglePageController@index)->where(any, .*);
2. 建立controller SinglePageController,把index指向app
public function index() { return view(app); }
public function index() {
return view(app);
}
3. 建立/resources/views/app.blade.php
重點有幾個地方
一定要有<div id=”app”></div> 這是vue的掛載點
一定要引入<script src=”{{asset(‘js/app.js’)}}”></script>
一定要有<router-view></router-view>作為vue-router切換頁面內容渲染區域
&...