Vue.js Laravel 9 安装 Vue Router for Vue 2.6.12

在本文中，我们将介绍如何在Vue.js Laravel 9项目中安装Vue Router，该项目使用Vue版本2.6.12。

什么是Vue Router？

Vue Router是Vue.js官方提供的用于实现路由功能的插件。它允许我们在Vue应用程序中进行页面跳转和参数传递，使得我们可以实现单页面应用（SPA）的效果。Vue Router可以通过路由配置文件定义不同的路由规则，然后根据不同的路由进行页面的加载和显示。

安装Vue Router

步骤1：创建Vue.js Laravel项目

首先，我们需要创建一个Vue.js Laravel项目。在终端中执行以下命令：

composer create-project --prefer-dist laravel/laravel vue-router-example

步骤2：添加Vue.js依赖

在项目的根目录中，执行以下命令来安装Vue.js依赖：

npm install vue

步骤3：安装Vue Router

现在，我们可以通过以下命令来安装Vue Router：

npm install vue-router@2.8.1

步骤4：创建路由配置文件

在resources/js目录下创建一个新文件夹router，然后在该文件夹中创建一个新文件index.js。在index.js中，我们将定义我们的路由配置。

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../components/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../components/About.vue')
  },
  {
    path: '/contact',
    name: 'Contact',
    component: () => import('../components/Contact.vue')
  }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;

上述代码创建了三个路由：Home、About和Contact，分别对应了三个组件：Home.vue、About.vue和Contact.vue。

步骤5：创建组件

在resources/js/components目录下创建三个组件文件：Home.vue、About.vue和Contact.vue。

你可以根据自己的需求，分别定义这三个组件的内容。

步骤6：配置Vue Router

在resources/js/app.js中，我们需要配置Vue Router。

import Vue from 'vue';
import router from './router';

Vue.component('app', require('./components/App.vue').default);

const app = new Vue({
  el: '#app',
  router
});

步骤7：使用Vue Router

现在，我们可以在Vue组件中使用Vue Router了。

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

上述代码使用了router-link组件来创建路由链接，使用router-view组件来渲染当前活动的组件。