vue项目安装vue路由

Vue Router 是 Vue.js 的官方导航库，用于创建单页应用(SPA)中页面之间的导航以及管理组件的状态。要在 Vue 项目中安装并配置 Vue Router，你需要按照以下步骤操作：

### 安装 Vue Router

首先，确保您已经安装了 Node.js 和 npm (Node Package Manager)。然后，您可以使用以下命令来全局安装 Vue Router:

npm install -g @vue/cli

接着，在您的项目目录下初始化一个新的 Vue CLI 项目，并安装所需的依赖包：

vue create my-project
cd my-project
vue add router

在这个过程中，`vue add router` 会自动帮助您选择和配置必要的依赖，比如 `vue-router`, `vuex` 等。

### 配置 Vue Router

在项目中找到 `router/index.js` 文件，这是 Vue Router 的入口文件。在这里，你可以配置路由规则和命名视图等。例如，添加一个基本的路由配置如下：

import { createRouter, createWebHistory } from 'vue-router';

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

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

上面的代码定义了一个简单的路由配置，包含了两个基本的路由路径，分别对应到 `Home.vue` 和 `About.vue` 视图组件。

### 使用路由

现在，您可以在 Vue 组件内的 `<router-link>` 标签上使用动态链接，或者在 `<router-view>` 中展示当前路由对应的组件内容：

<template>
  <div id="app">
    <nav>
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
      </ul>
    </nav>

    <router-view></router-view>
  </div>
</template>

通过上述步骤，您就可以成功地将 Vue Router 添加到您的 Vue 项目中，并开始构建单页应用的导航功能。记得运行 `npm run serve` 或 `yarn serve` 来启动您的项目预览。