Vue Router 入门：做多个页面

ynglan2026/05/02vue-beginnerVue 3 Vue Router 路由

Vue Router 入门：做多个页面

一个 Vue 项目通常有多个页面，页面之间的跳转靠路由。Vue Router 是 Vue 官方路由管理器。

安装

Vite 创建项目时如果选了 Vue + Router，会自动安装。否则手动安装：

pnpm add vue-router

基本配置

创建路由文件 src/router/index.ts：

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('../views/Home.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/About.vue')
    },
    {
      path: '/user/:id',
      name: 'user',
      component: () => import('../views/User.vue')
    }
  ]
})

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')

在 App.vue 中使用

<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </nav>

  <router-view />
</template>

<router-link> 生成链接，点击不刷新页面
<router-view> 是路由出口，显示对应页面组件

路由跳转

<template>
  <!-- 声明式导航 -->
  <router-link to="/about">关于</router-link>

  <!-- 编程式导航 -->
  <button @click="goToUser">去用户页</button>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

function goToUser() {
  router.push('/user/123')
}
</script>

动态路由

路由参数用 : 声明：

{
  path: '/user/:id',
  name: 'user',
  component: () => import('../views/User.vue')
}

组件中获取参数：

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

const route = useRoute()
console.log(route.params.id) // 获取 :id 的值
</script>

<template>
  <p>用户ID：{{ route.params.id }}</p>
</template>

嵌套路由

一个页面里还有子页面：

{
  path: '/user/:id',
  component: () => import('../layouts/UserLayout.vue'),
  children: [
    { path: '', redirect: 'profile' },
    { path: 'profile', component: () => import('../views/UserProfile.vue') },
    { path: 'posts', component: () => import('../views/UserPosts.vue') }
  ]
}

<!-- UserLayout.vue -->
<template>
  <div class="user-layout">
    <nav>
      <router-link :to="`/user/${route.params.id}/profile`">Profile</router-link>
      <router-link :to="`/user/${route.params.id}/posts`">Posts</router-link>
    </nav>
    <router-view />
  </div>
</template>

路由守卫

路由守卫在路由跳转前/后做拦截，常用于登录验证。

router.beforeEach((to, from, next) => {
  // to: 目标路由
  // from: 来源路由
  // next: 继续跳转的方法

  const isLoggedIn = localStorage.getItem('token')

  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login')
  } else {
    next()
  }
})

在路由中标记需要登录：

{
  path: '/dashboard',
  component: () => import('../views/Dashboard.vue'),
  meta: { requiresAuth: true }
}

总结

createRouter 创建路由实例
router-link 和 router.push 导航
useRoute 获取路由参数
beforeEach 做路由守卫

下篇讲 Pinia，Vue 3 的状态管理方案。

Vue Router 入门：做多个页面

ON THIS PAGE