Laravel+Vue.js2+vue-router+vue-axios项目路由配置方法咨询

别担心，我来帮你一步步搞定Laravel环境下的Vue路由和状态管理配置——和你纯Vue项目的思路基本一致，只是需要适配Laravel的路由兜底规则，具体步骤如下：

1. 完善路由规则文件 mainRoutes.js #

先在/resources/assets/js/router/mainRoutes.js里定义你的Vue路由数组，写法和纯Vue项目完全一致：

// resources/assets/js/router/mainRoutes.js
export default [
  {
    path: '/',
    name: 'Home',
    // 推荐用懒加载优化性能，也可以直接导入组件
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  // 按需添加更多路由规则
]

2. 初始化VueRouter实例 router/index.js #

在这个文件里引入VueRouter和你的路由规则，创建并导出路由实例：

// resources/assets/js/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import mainRoutes from './mainRoutes'

// 注册VueRouter插件
Vue.use(VueRouter)

const router = new VueRouter({
  // 如果你想用history模式（去掉URL里的#），一定要配置下面的Laravel兜底路由
  mode: 'history',
  routes: mainRoutes
})

export default router

关键：配置Laravel的兜底路由 #

如果用了history模式，必须在Laravel的routes/web.php里添加一条兜底路由，否则刷新Vue路由页面会出现404：

// routes/web.php
// 先保留你原本的Laravel路由（比如API路由、静态页面路由等）
// 然后添加这条兜底路由，指向你的Vue挂载视图
Route::get('/{any}', function () {
    return view('app'); // 这里的`app`是你的Vue挂载对应的blade视图文件
})->where('any', '.*');

3. 配置Vuex状态管理 store/index.js #

和纯Vue项目写法完全一致，初始化你的Vuex Store：

// resources/assets/js/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 定义你的全局状态，比如 user: null, isLoggedIn: false
  },
  mutations: {
    // 定义修改状态的同步方法，比如 SET_USER(state, user) { state.user = user }
  },
  actions: {
    // 定义异步操作，比如 login({ commit }, credentials) { ... }
  },
  modules: {
    // 如果需要模块化管理状态，可以在这里拆分
  }
})

4. 在app.js中整合路由与状态管理 #

完善你的app.js，确保正确导入router和store，然后挂载到Vue实例：

// resources/assets/js/app.js
import Vue from 'vue'
// 导入路由和状态管理实例
import router from './router/index'
import store from './store/index'
// 导入你的自定义组件
import Myheader from './components/Myheader.vue'
import Myfooter from './components/Myfooter.vue'

const app = new Vue({
  el: '#app',
  router,
  store,
  components: { Myheader, Myfooter }
})

最后需要注意的细节 #

• 确保已经安装了依赖：如果还没装vue-router和vuex，在项目根目录执行 npm install vue-router vuex --save
• 你的blade视图（比如resources/views/app.blade.php）里必须有Vue挂载的根节点：<div id="app"></div>，并且引入编译后的js文件：<script src="{{ mix('js/app.js') }}"></script>
• 如果不需要history模式，把router/index.js里的mode: 'history'删掉，默认是hash模式，就不需要配置Laravel的兜底路由了

内容的提问来源于stack exchange，提问作者Michel Tchoutang