vue- router如何使用

Vue Router 是一个 Vue.js 官方的路由管理器，它可以帮助我们实现单页应用程序（SPA）中的路由功能。以下是使用 Vue Router 的步骤：

1. 安装 Vue Router：使用 npm 或 yarn 安装 Vue Router。

2. 引入 Vue Router：在项目入口文件中引入 Vue 和 Vue Router。

3. 创建路由实例：创建一个路由实例，并定义路由规则。

4. 配置路由映射：将路由规则映射到对应的组件。

5. 渲染视图：在 Vue 实例中渲染路由组件。

6. 添加路由导航：使用 Vue Router 提供的 router-link 组件实现路由导航。

具体来说，可以通过以下代码来创建一个简单的路由实例：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';

Vue.use(VueRouter);

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

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

export default router;

这里定义了两个路由规则，分别是根路径 / 和 /about，对应的组件是 Home 和 About。在 Vue 实例中，可以通过 router-view 组件渲染路由组件，并使用 router-link 组件实现路由导航：

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

这就是使用 Vue Router 的基本步骤，你可以根据自己的需要配置更多的路由规则和导航组件来实现更复杂的功能。