vue 路由配置

// Vue 路由配置示例代码

// 首先，确保已经安装了 vue-router
// 使用 npm 安装: npm install vue-router

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';

// 使用 Vue Router 插件
Vue.use(Router);

// 创建路由实例并配置路由规则
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact
  }
];

// 创建路由器实例并传递 `routes` 配置
const router = new Router({
  mode: 'history', // 使用 HTML5 History 模式，去掉 URL 中的 #
  base: __dirname, // 设置基础路径
  routes // (缩写) 相当于 routes: routes
});

// 导出路由器实例以便在主文件中使用
export default router;

解释说明：

1. 引入 Vue 和 Vue Router：首先需要引入 Vue 和 Vue Router，并确保已经安装了 vue-router。
2. 定义组件：这里我们定义了三个组件 Home, About, 和 Contact，它们分别对应不同的页面。
3. 配置路由规则：通过 routes 数组定义了每个路径对应的组件。例如，访问 / 时会显示 Home 组件。
4. 创建路由器实例：使用 new Router() 创建一个路由器实例，并传入路由配置。这里使用了 mode: 'history' 来去掉 URL 中的 # 号。
5. 导出路由器实例：最后将路由器实例导出，以便在主文件（如 main.js）中使用。

这样配置后，你的 Vue 应用就可以根据不同的 URL 显示不同的组件了。