Vue Router的基本概念

路由：在Web开发中，路由是指根据URL地址映射到相应的资源（如HTML页面、组件等）的过程。Vue Router通过管理URL与Vue组件之间的映射关系，实现页面的无刷新跳转。

单页面应用（SPA）：SPA是一种特殊的Web应用，它在加载时会一次性加载整个应用的资源（HTML、CSS、JavaScript等），然后在用户与页面进行交互时，仅更新页面的部分内容，而不是重新加载整个页面。Vue Router非常适合用于构建SPA。

Vue Router的安装

npm install vue-router --save

配置Vue Router：

在router文件夹下的index.js文件中，配置路由映射关系。即定义URL路径与Vue组件之间的对应关系。

创建Vue组件，并在路由配置中引用这些组件。

创建VueRouter实例，并将路由配置传入该实例。

在Vue实例中挂载创建的VueRouter实例。

import { createRouter, createWebHistory } from 'vue-router'  // 导入配置路由的工具
import HomeView from '../views/HomeView.vue'  // 导入组件(首页)
import Search from '@/views/Search.vue'

// 创建路由对象
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),  //路由模式
  routes: [  //配置路由地址
    {
      path: '/',  //目标地址
      name: 'home', //路由名称
      component: HomeView //路由目标
    },

Vue Router的使用

定义路由组件：创建Vue组件，这些组件将作为路由的目标页面。

配置路由映射：在路由配置文件中，定义URL路径与组件之间的映射关系。

使用和：

：用于创建导航链接。它会被渲染成一个标签，但点击时不会重新加载页面，而是根据URL路径跳转到相应的组件。

：用于显示当前路由对应的组件。它是一个占位符，Vue Router会根据当前URL路径动态地将相应的组件渲染到该位置。

动态路由：在URL路径中使用动态参数，以匹配不同的URL并渲染相同的组件但传递不同的参数。例如，/user/:id可以匹配所有以/user/开头的URL，并将id部分作为参数传递给User组件。

嵌套路由：在Vue应用中，页面通常由多层嵌套的组件组成。Vue Router支持嵌套路由配置，可以轻松表达这种关系。

编程式导航：除了使用进行声明式导航外，还可以使用Vue Router实例的方法（如router.push、router.replace等）进行编程式导航。