Vue3集成Vue Router从基础配置到项目实践的完整指南

npm install vue-router@4
# 或者
yarn add vue-router@4
# 或者
pnpm add vue-router@4

// src/router/index.ts
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'

// 1. 定义路由配置
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/HomeView.vue') // 使用懒加载
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/AboutView.vue')
  },
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('@/views/UserView.vue'),
    props: true // 将路由参数作为 props 传递给组件
  }
]

// 2. 创建路由实例
const router = createRouter({
  history: createWebHistory(), // 使用 HTML5 History 模式
  routes
})

export default router

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

const app = createApp(App)
app.use(router) // 挂载路由插件
app.mount('#app')

<template>
  <div>
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
      <router-link :to="{ name: 'User', params: { id: 123 }}">用户页面</router-link>
    </nav>

    <!-- 路由出口：匹配到的组件将在此渲染 -->
    <router-view />
  </div>
</template>

<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router'

// 获取路由实例和当前路由对象
const router = useRouter()
const route = useRoute()

// 编程式导航（通过代码跳转）
const goToAbout = () => {
  router.push('/about')
  // 或者使用命名路由
  // router.push({ name: 'About' })
}

// 带参数的跳转
const goToUser = (id: number) => {
  router.push({ name: 'User', params: { id } })
}

// 替换当前路由（不会在浏览器历史中留下记录）
const replaceRoute = () => {
  router.replace('/about')
}

// 前进后退
const goBack = () => router.go(-1)
const goForward = () => router.go(1)
</script>

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes' // 路由配置单独管理
import NProgress from 'nprogress'

const router = createRouter({
  history: createWebHistory(),
  routes
})

/**
 * 全局前置守卫
 * 作用：在每次路由跳转前执行，用于控制访问权限、设置页面标题、开启进度条等。
 */
router.beforeEach((_to, _from, next) => {
  NProgress.start() // 开启页面顶部进度条
  // 这里可以做权限验证，例如检查 token 是否存在
  // if (to.meta.requiresAuth && !isLoggedIn) { next('/login') }
  // else { next() }
  next()
})

/**
 * 全局后置守卫
 * 作用：在路由跳转完成后执行，用于关闭进度条、埋点上报等。
 */
router.afterEach(() => {
  NProgress.done() // 关闭进度条
})

export default router

// src/router/routes.ts
import { type RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/index',
    name: 'index',
    component: () => import('../components/Homepage.vue'),
    meta: { keepAlive: true }, // 自定义元数据
    children: [
      {
        path: 'article',
        name: 'article',
        component: () => import('../views/page/article/index.vue')
      }
    ]
  },
  {
    path: '/',
    redirect: { name: 'index' } // 重定向
  }
]

export default routes

<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <!-- 当路由的 meta 中 keepAlive 为 true 时，缓存组件 -->
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive" />
      </keep-alive>
      <!-- 否则不缓存 -->
      <component :is="Component" v-if="!$route.meta.keepAlive" />
    </router-view>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { watch } from 'vue'

const route = useRoute()

// 监听路由参数的变化
watch(() => route.params.id, (newId, oldId) => {
  console.log('用户 ID 从', oldId, '变为', newId)
  // 在这里调用获取用户详情数据的 API
})
</script>