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';

// 安装Vue Router插件
Vue.use(Router);

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

// 创建并导出路由实例
export default new Router({
  mode: 'history', // 使用HTML5 History模式，去掉URL中的#
  routes // 等价于routes: routes
});

// 解释说明：
// 1. 我们首先导入了Vue和vue-router库，并且导入了两个组件（Home和About）。
// 2. 使用Vue.use(Router)来安装vue-router插件。
// 3. 定义了一个包含路径、名称和对应组件的路由数组。
// 4. 创建一个新的Router实例，并配置使用history模式以去掉URL中的#号。
// 5. 最后将这个Router实例导出，以便在主应用中使用。