laravel vue3路由配置

在Laravel中使用Vue.js的版本为Vue 3时，可以按照以下步骤进行路由配置。

首先，确保已经安装了 Laravel 8 或更高版本，并且项目中包含了 Vue CLI（如果没有，则需要通过命令 npm install -g @vue/cli 全局安装）。
创建一个新的 Laravel 项目，然后运行 composer require laravel/ui --dev 来安装 Laravel UI 组件。这将自动生成前端资源文件。
接下来，我们需要修改默认的 Vue Router 设置。打开 resources/js/app.js 文件，并添加以下内容：
javascript
import { createApp } from 'vue';
import App from './components/App.vue';
import router from './router'; // 导入路由模块

const app = createApp(App);
app.use(router); // 注册路由
app.mount('#app');
现在，我们需要创建一个名为 router.js 的 JavaScript 文件，该文件位于 resources/js/ 目录下。在此文件中定义所有的路由信息。示例代码如下：
javascript
import { createRouter, createWebHistory } from "vue-router";
import HomePage from "@/views/HomePage.vue";
import AboutPage from "@/views/AboutPage.vue";
// ...其他页面组件引入

const routes = [
    { path: "/", component: HomePage },
    { path: "/about", component: AboutPage },
    // ...其他路由配置
];

export default createRouter({
    history: createWebHistory(),
    routes,
});
最后，在根组件 App.vue 中添加 <router-view></router-view> 标签，以显示当前活动路由对应的视图组件。
完成上述步骤后，重新编译前端资源文件，可以通过运行 npm run dev 命令来实现。