路由 分类

现在，创建一个全新的 vue 项目

npm init vue@latest

刘春龙原创2026/3/5大约 1 分钟

编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现

<template>
  <button @click="jump">跳转到about页面</button>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const jump = () => {
  router.push('/about')
}
</script>

刘春龙原创2026/3/5大约 1 分钟

嵌套路由

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构

前提准备

 |---src/views
     |---home
        home.vue
     |---about
        about.vue
        about1.vue
        about2.vue

刘春龙原创2026/3/5大约 1 分钟

别名、重定向和命名路由

别名

有时候，用户访问/和/home都应该跳转到home页面，此时可用路由别名来实现

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

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

export default router

刘春龙原创2026/3/5小于 1 分钟

不同的历史模式

在创建路由器实例时，history 配置允许我们在不同的历史模式中进行选择

Hash 模式

hash 模式是用 createWebHashHistory() 创建的

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

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

export default router

刘春龙原创2026/3/5大约 2 分钟

导航守卫

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的

全局前置守卫

你可以使用 router.beforeEach 注册一个全局前置守卫,当一个导航触发时，就会触发全局前置守卫

router.beforeEach((to, from, next) => {
  if (token) {
    next()
  } else {
    next({
      path: '/login',
    }) // 或者 return false
  }
})

刘春龙原创2026/3/5大约 2 分钟

路由元信息

有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等，这些事情可以通过接收属性对象的meta属性来实现

定义路由的时候你可以配置 meta 字段,这个meta就是路由元信息

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      meta: {
        requiresAuth: true,
      },
      component: () => import('../views/home/home.vue'),
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/about/about.vue'),
      meta: {
        requiresAuth: false,
      },
    },
  ],
})

router.beforeEach((to, from, next) => {
  let token = true
  if (to.meta.requiresAuth) {
    if (!token) {
      console.log('身份认证失败')
      next({
        path: '/login',
      })
    } else {
      next()
    }
  } else {
    console.log('权限不足')
    return
  }
})

export default router

刘春龙原创2026/3/5小于 1 分钟

过渡动效

想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 v-slot API 和 Transition API

<template>
  <RouterLink to="/">跳转home</RouterLink>
  <RouterLink to="/about">跳转about</RouterLink>

  <RouterView v-slot="{ Component, route }">
    <Transition :name="route.meta.transition || 'fade'">
      <component :is="Component" />
    </Transition>
  </RouterView>
</template>

<script lang="ts" setup></script>

<style>
/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* slideLeft */
.slideLeft-enter-active,
.slideLeft-leave-active {
  transition: opacity 1s ease;
}

.slideLeft-enter-from,
.slideLeft-leave-to {
  opacity: 0;
}

/* slideRight */
.slideRight-enter-active,
.slideRight-leave-active {
  transition: opacity 2s ease;
}

.slideRight-enter-from,
.slideRight-leave-to {
  opacity: 0;
}
</style>

刘春龙原创2026/3/5大约 1 分钟

滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      meta: {
        requiresAuth: true,
        transition: 'slideLeft',
      },
      component: () => import('../views/home/home.vue'),
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/about/about.vue'),
      meta: {
        requiresAuth: false,
        transition: 'slideRight',
      },
    },
  ],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
})

export default router

刘春龙原创2026/3/5小于 1 分钟

动态路由

对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由

添加路由

用 router.addRoute() 新增加路由配置

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      meta: {
        requiresAuth: true,
        transition: 'slideLeft',
      },
      component: () => import('../views/home/home.vue'),
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/about/about.vue'),
      meta: {
        requiresAuth: false,
        transition: 'slideRight',
      },
    },
  ],
})

router.addRoute({
  path: '/about1',
  name: 'about1',
  component: () => import('../views/about/about1.vue'),
})

export default router

刘春龙原创2026/3/5大约 1 分钟