一、使用问题汇总：

1.报错 ：error 'router' is assigned a value but never used no-unused-vars：

 error  'router' is assigned a value but never used  no-unused-vars

原因：

发现是在package.json文件中自动生成了eslint，而配置项的rules为空，所以就报了：routes’被分配了一个值，但从未使用过无未使用的变量 的错误。

router错误01.png

在rules中配置 "no-unused-vars": "off" 解决（关闭提示）

router错误01解决.png

2. router-link to 不起作用，路由不生效

配置router错误02.png

原因排查：

• vue-router没有安装成功。
  原本的安装方法：

npm install vue-router@4

没有安装成功，更换成：

npm i vue-router@next

• 没有正确引入 VueRouter
  在使用 Vue Router 时，需要正确引入 VueRouter 模块。如果没有正确引入该模块，那么就无法正确使用 VueRouter，导致 <router-link> 组件无法正确生成 href 属性。例如：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 路由配置
  ]
})

new Vue({
  router,
  // 组件等配置
}).$mount('#app')

添加：import VueRouter from 'vue-router'后成功。

• 注意：看其他人的代码并没有要特意添加"import VueRouter from 'vue-router' ",笔者在运行成功后删掉这一行代码也依然有效。猜测是因为一开始安装没有成功，导致的。

二、使用方法

Vue 3 提供了一个官方的路由库 vue-router@4 来管理单页应用程序（SPA）的路由。Vue Router 是一个独立的库，需要单独安装和配置。下面是 Vue Router 的基本用法：

1. 安装 Vue Router
   可以通过 npm 来安装 Vue Router：

npm install vue-router@4

2. 创建路由器
   创建一个路由器，并配置路由规则，示例如下：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

上面的代码中，我们首先通过 createRouter 函数创建了一个路由器对象 router，并通过 createWebHistory 创建了一个基于 HTML5 History API 的路由模式。然后我们配置了两个路由规则：/ 对应 Home 组件，/about 对应 About 组件。

3. 注册路由器
   我们需要在 Vue 应用程序中注册路由器对象 router，并将其作为 createApp 函数的参数。示例如下：

import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

在上面的代码中，我们首先创建了一个 Vue 应用程序，并将 App 组件作为根组件。然后我们通过 app.use(router) 注册了路由器对象 router，使路由器成为 Vue 应用程序的插件。最后我们通过 app.mount('#app') 将应用程序挂载到 #app 元素中。

4. 配置路由链接
   在 Vue 组件中，我们可以使用 router-link 组件来配置路由链接。router-link 组件会自动渲染成一个带有 href 属性的 <a> 标签，使用户能够通过点击链接来导航到不同的页面。

以下是一个使用 router-link 的示例：

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

在上面的代码中，我们通过 <router-link> 组件创建了两个路由链接，分别指向 / 和 /about。当用户点击链接时，Vue Router 会自动将 URL 更新为对应的路由规则，然后渲染出对应的组件。通过 <router-view> 组件可以渲染出对应的路由组件。

这是 Vue Router 的一个简单用法示例，Vue Router 还提供了很多其他功能，例如路由守卫、动态路由、嵌套路由等，可以根据实际需求来使用。