组合式API路由详解

vue-router

vue-router4 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用。

vue-router 是基于路由和组件的，路由用于设定访问路径, 将路径和组件映射起来，在 vue-router 的单页面应用中, 页面路径的改变就是组件的切换。

帮助文档

router.vuejs.org/zh/

安装 vue-router

我们在使用脚手架的时候选择是否创建router选择为Yes就可以了。

路由的定义

src/router/index.js

复制import { createRouter, createWebHistory } from 'vue-router' // 导入相应的方法
import HomeView from '../views/HomeView.vue' // 同步引入页面

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/', // 路由的path
      name: 'home',  // 路由的name
      component: HomeView   // 路由对应的页面
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')  // 异步引入页面
    }
  ]
})
export default router

src/main.js

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

const app = createApp(App)
app.use(router) // 将我们定义路由用插件的方法安装
app.mount('#app')

src/App.vue

复制<script setup>
import { RouterLink, RouterView } from 'vue-router' // 导入相应的组件
</script>
<template>
  <header>
    <div class="wrapper">
      <nav> <!-- 导航栏 -->
        <RouterLink to="/">Home</RouterLink> <!-- 点击后相应的路由对应的组件就会展示在下面的RouterView中 -->
        <RouterLink to="/about">About</RouterLink> <!-- 点击后相应的路由对应的组件就会展示在下面的RouterView中 -->
      </nav>
    </div>
  </header>
  <RouterView /> <!-- 显示路由对应的组件 -->
</template>

RouterView

RouterView 是一个功能性组件，用于渲染路径匹配到的视图组件。

RouterLink

<router-link>标签支持用户在具有路由功能的应用中(点击)导航。

| 属性 | 类型 | 说明 |
| ---- | ------ | -------------- | -------------------------- |
| to | String/Object | 目标路由/目标位置的对象 |
| replace | Boolean | 不留下导航记录 |
| append | Boolean | 在当前路径后加路径 /a => /a/b |
| tag | String | 指定渲染成何种标签 |
| active-class | String | 激活时使用的Class