用于实现vue项目中各个组件之间的切换，在单页面应用中实现页面切换的效果。

路由模式

Vue history 和 hash 两种模式的优缺点 - 知乎 (zhihu.com)

路由创建

在Vue项目中创建路由功能，有几种不同的方式：

1. 在使用create-vue 脚手架工具创建项目时，选中路由选项，由脚手架工具自行创建相应的路由功能。
2. 手动配置相应的功能
   1. 使用npm安装相应的路由包：npm install vue-router
   2. 导入路由依赖
   3. 配置路由规则
   4. 在views视图中导入页面组件
   5. 在main.js中导入并挂载路由对象

配置路由

在router目录下的index.js文件中实现相应的路由配置，可配置路径、名称、对应vue组件。

相对路径和绝对路径的区别：相对路径（不带‘/’）会拼接父级路由，绝对路径（带‘/’）是配置的完整路由

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component:HomeView
    } 
  ]
})

// 嵌套路由
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'index',
      component: IndexView,
      children:[
        {
          path: 'student',
          name: 'student',
          component: StudentShow
        }
      ]
    }
  ]
})

使用路由

vue3有两种路由，分别是Hash路由和history路由。

路由的hash和history模式的区别

1. 首先hash模式url带#号，history不带#号
2. hash模式前端路由修改的是hash值(#及以后)，对后端没影响，因此改变hash也不会重新加载页面，比如修改为了不存在的#123页面，页面不会跳转;history模型刚好相反，没有对应的页面就会出现404

路由标签

• **<RouterLink>标签：**在根组件中需要跳转的地方使用<RouterLink>标签，此标签功能类似于<a>标签的作用，用于实现页面跳转的效果，部分情况下也可使用<a>标签实现跳转，但在Hash路由下无法使用。
• **<RouterView>标签：**在需要实现链接的页面组件的位置就使用<RouterView>标签，页面组件会在此标签的位置上显示。

示例说明：

<header>
			<nav>
        <RouterLink to="/home">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
  </header>

<RouterView></RouterView>