介绍vue-router使用方法

Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，可以快速地构建单页应用程序。下面是 Vue Router 的使用方法：

1. 安装 Vue Router：首先确保已经安装了 Vue.js，然后可以通过 npm 进行安装 Vue Router，命令为：`npm install vue-router`。

2. 创建路由实例：在项目的入口文件中，一般是 `main.js` 文件中，引入 Vue Router 并创建一个路由实例。示例代码如下：

```javascript
import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter)

const router = new VueRouter({
  // 配置路由
})

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");
```

3. 配置路由：在创建路由实例时，需要配置路由的映射关系。可以通过 `routes` 属性来配置路由，示例代码如下：

```javascript
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})
```

在上述示例代码中，配置了两个路由，分别对应 `'/'` 和 `'/about'` 路径，以及对应的组件 `Home` 和 `About`。

4. 添加路由插庭：在根组件（一般是 `App.vue`）中，使用 `<router-view>` 标签来显示当前路由对应的组件。示例代码如下：

```html
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
```

5. 使用 `<router-link>` 组件：在需要跳转到其他路由的地方，使用 `<router-link>` 组件来生成链接。示例代码如下：

```html
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>
```

在上述示例代码中，`<router-link>` 组件包裹的内容即为链接的文本，`to` 属性指定了跳转的路径。

6. 执行路由跳转：可以通过编程的方式执行路由跳转，使用 `router.push` 方法。示例代码如下：

```javascript
methods: {
  goToAboutPage() {
    this.$router.push('/about');
  }
}
```

在上述示例代码中，`goToAboutPage` 方法会执行路由跳转到 `'/about'` 路径。

以上就是 Vue Router 的基本使用方法，更详细的使用方式可以查看 Vue Router 的官方文档。