【Vue3入门】vue-router 路由管理

🚀 欢迎来到我的CSDN博客：Optimistic _ chen

✨ 一名热爱技术与分享的全栈开发者，在这里记录成长，专注分享编程技术与实战经验，助力你的技术成长之路，与你共同进步！

---

🚀我的专栏推荐：

专栏	内容特色	适合人群
🔥C语言从入门到精通	系统讲解基础语法、指针、内存管理、项目实战	零基础新手、考研党、复习
🔥Java基础语法	系统解释了基础语法、类与对象、继承	Java初学者
🔥Java核心技术	面向对象、集合框架、多线程、网络编程、新特性解析	有一定语法基础的开发者
🔥Java EE 进阶实战	Servlet、JSP、SpringBoot、MyBatis、项目案例拆解	想快速入门Java Web开发的同学
🔥Java数据结构与算法	图解数据结构、LeetCode刷题解析、大厂面试算法题	面试备战、算法爱好者、计算机专业学生
🔥Redis系列	从数据类型到核心特性解析	项目必备

---

🚀我的承诺：

✅ 文章配套代码：每篇技术文章都提供完整的可运行代码示例

✅ 持续更新：专栏内容定期更新，紧跟技术趋势

✅ 答疑交流：欢迎在文章评论区留言讨论，我会及时回复（支持互粉）

---

🚀 关注我，解锁更多技术干货！
⏳ 每天进步一点点，未来惊艳所有人！✍️ 持续更新中，记得⭐收藏关注⭐不迷路 ✨

📌 标签:#技术博客  #编程学习  #Java  #C语言  #算法  #程序员

文章目录

• 路由
• • vue-router
  • 单页应用和多页应用
  • Vue文件的分类
• 路由的使用
• • 配置路由表
  • 路由出口
  • 声明式导航
  • • 声明式导航-传查询参
    • 声明式导航-传动态参
    • 查询参和动态参的区别
  • 更多路由配置
  • • 重定向
    • 404页面
    • 模式
  • 编程式导航
  • • 编程式导航传参
• 路由守卫
• 完结撒花！🎉

路由

生活中，路由器是一个比较常见的设备，路由器的作用就是ip和设备之间的映射关系 。而在Vue中，路由是路径和页面之间的映射关系。如下图：

vue-router

Vue Router 是Vue官⽅的⼀个路由插件,是⼀个第三⽅模块包，想了解更多专业知识可以去官方手册详阅。
vue-router是Vue官方的路由管理器，我们借助 vue-router 模块来实现页面路由的切换功能。通过 URL 来切换页面内容，但不会刷新整个页面！

单页应用和多页应用

在学习路由切换前，需要先明确HTML网页中单页应用（SPA）和多页应用（MPA）的区别。

特点	单页应用	多页应用
页面数量	1个HTML 页面	多个HTML页面
跳转方式	前端路由，无刷新	后端路由，整页刷新
加载速度	首页慢，后续快	首页快，后续慢
页面性能	按需更新，性能高	整体更新，性能低
用户体验	流畅	一般
SEO	差	优
使用场景	后台相同、工具	内容网站、门户网站

SEO：让你的网站在搜索引擎（Google、百度）里排得更靠前的技术！

Vue文件的分类

Vue文件从代码层面来讲没有分类，但是为了便于理解和管理，把Vue文件分为：页面组件和复用组件

• 页面组件：页面展示，配合路由使用，放置在src/views目录下
• 复用组件：用于组装页面组件，放置在src/components目录下

路由的使用

1. 下载VueRouter模块 npm i vue-router
2. 导入相关函数

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

3. 创建路由实例

const router = createRouter({
    //哈希模式
    histor:createWebHashHistory(),
    routes:[
       //路由表规则：path和component的对应关系
    ]
})

4. 注册:将路由实例注册到应⽤中,让规则⽣效

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
    // 哈希模式, 路径带# 
    history: createWebHashHistory(),
    routes: [
      // 路由表规则, 即 path 与 component 的对应关系
    ]
 })
const app=createApp(App)
app.use(router)
app.mount('#app')

配置路由表

vue-router经过前面4步的准备工作后，我们需要把 URL 路径和组件对应起来，配置完路由表数组中的path值，当浏览器中url命中时，说明两者存在映射关系。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

// 1. 定义路由（路径和组件的映射）
const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
  // 动态路由（:id 是参数）
  { path: '/user/:id', name: 'User', component: () => import('@/views/User.vue') }
]

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

export default router

路由出口

给路由出口，路由匹配的组件，显示的位置

<script setup></script>
<template>
<!-- 路由出⼝ --> 
<router-view />
</template>

当url匹配到路由数组中的path值，则把相应的component渲染到<router-view/>的位置

声明式导航

我们之前配置的路由表虽然能通过URL路径匹配，但目前只能手动修改地址栏来实现跳转，无法通过点击链接直接导航，影响了用户体验的流畅性。vue-router提供了一个全局组件router-link，用于点击跳转，需添加to属性指定路径。

这意味着给router-link标签设置了一个固定的路由，点击该标签即可跳转到指定页面。

<router-link to="path值"> 点击跳转 </router-link>

并且当我们使用router-link后，打开F12发现⾃动给当前导航加了两个类名router-link-exact-active 和router-link-active（⾃带激活类名）

• router-link-exact-active：精确匹配，to="/find" 仅可以匹配/find
• router-link-active：模糊匹配，只要是以/find开头的路径都可以和to="/find"匹配到

<!-- App.vue -->
<template>
  <div id="app">
    <!-- 导航链接 -->
    <nav>
      <router-link to="/">首页</router-link> |
      <router-link to="/about">关于</router-link> |
    </nav>
    
    <!-- 路由视图：显示当前路由对应的组件 -->
    <router-view />
  </div>
</template>

声明式导航-传查询参

在跳转路由时，通过两种方式（字符串传参，对象传参）传参， 在跳转的时候把所需要的参数传到目标页面中。

• 字符串传参：作为URL的查询字符串

<router-link to="/path?参数名=值"> xxx  </router-link>

• 对象传参：路径方式，path + query

<router-link :to="{
   path: '/path',
   query: {
     参数名: 值 
     ...
   }
}"> xxx </router-link>

• 目标页面接收参数：

<script setup>
  import {useRoute} from 'vue-route'
  //得到当前激活的路由对象
  const route=useRoute()
  //获取查询参数
  console.log(route.query)//全部参数
</script>

声明式导航-传动态参

动态路由传参有两步：

1. 配置动态路由

// 定义路由规则
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    // 注意：这里的 path 需要配置动态参数 :id
    path: '/user/:id',  // 必须包含 :id 才能匹配到 params.id
    name: 'User',
    component: () => import('../views/User.vue')
  }
]

2. 传递参数的方法和传查询参的方法相同：

• 字符串传参 ：path（路径）方式

<router-link to="/path/具体值"> xxx  </router-link>

• 对象传参：命名路由方式name+params

<router-link :to="{
   name: 'User',
   params: {
     参数名: 值 
     ...
   }
}"> xxx </router-link>

• 接收参数

<script setup>
  import {useRoute} from 'vue-route'
  //得到当前激活的路由对象
  const route=useRoute()
  //获取动态路由参数
  console.log(route.params)
</script>

查询参和动态参的区别

查询参：用于描述资源，是URL的可选部分，不需要在路由配置中定义
动态参：用于标识资源，是URL路径的一部分，需要在路由配置中定义

特点	查询参	动态参
URL格式	/user?id=123	/user/123
路由配置	正常path:'/user'	定义path:'/user/:id'
配合name使用	可选	必须
配合path使用	可以	不能

注意：如果是资源的唯一标识用params，如果是过滤/排序/搜索条件用query

更多路由配置

重定向

一开始打开网页时，url路径默认是/，未匹配到组件就会显示空白。

我们想要打开网页就是想要看到的页面而不是空白的，所以我们需要在路由表中配置，/路径就是我们的首页

或者使用重定向：匹配到/后，强制跳转到/about页面，避免空白

{ path: 匹配路径, redirect: 要重定向的路径 }

404页面

当路径找不到匹配的页面时，前端可以给一个404提示页面，提高读者阅读性。一般配置在路由规则的最后面

const router = createRouter({
  //指明路由模式：当前是hash模式，路径后会带#
  history:createWebHashHistory()
  //路由表规则
  routes: [
    //默认打开页面，会访问呢 / 路径，借助redirect让其强制跳转到/about
    {
      path: '/',
      redirect: '/about', //重定向
    },
    .....
    .....
    .....
    {
      path: '/:pathMatch(.*)*',
      component: _404,
    },
  ],
})

模式

• 路由的路径默认使用hash路由模式，有#，影响美观
• 使用history路由，需要服务端支持，Vite规避掉了history模式存在的问题

const router = createRouter({
  //指明路由模式：
  //history:createWebHashHistory(), //当前是hash模式，路径后会带#
  history: createWebHistory(), //历史模式
  //路由表规则
  ....
})

编程式导航

声明式导航通过<router-link>组件实现页面跳转，编程式导航则通过JavaScript代码控制路由跳转。声明式导航解决了手动修改URL的问题，改用点击方式跳转；而编程式导航则进一步优化了需要手动点击的限制，实现了路由自动跳转功能。

<script setup>
  import { useRouter } from 'vue-router'
  const router = useRouter()
  //路由跳转
  router.push(字符串)
  router.push(对象)
</script>

编程式导航传参

与声明式导航传参和接收参数的方法完全一致，既支持字符串，也支持对象

//字符串
router.push('/path?参数名=值')

//对象(查询参)
router.push({
   path: '/path',
   query：{
     参数名: 值
     ...
   }
})

//对象（动态参：记得配置路由）
router.push({
   name: '路由名称',
   params: {
     参数名:值
   }
})

• 目标路由页接收参数

//查询参数
<script setup>
  import { useRoute } from 'vue-router'
  const route = useRoute()
  console.log(route.query.参数名)
</script>


//动态参数
<script setup>
  import { useRoute } from 'vue-router'
  const route = useRoute()
  console.log(route.params.参数名)
</script>

路由守卫

路由守卫就是在路由跳转过程中执行的钩子函数，用于控制、拦截或验证导航。对于钩子函数的概念可以移步【Vue入门】组件及钩子函数博客，详细讲述了钩子函数

路由(导航)全局前置守卫：每个路由在跳转前都会触发回调函数

router.beforeEach((to, from) => {
// to: 
即将要进⼊的路由
 
// from: 
当前正要离开的路由
 
// false 取消导航(不发⽣跳转) 
return false
// 正常放⾏、正常跳转
 
return undefined | true
// 重定向到指定的路由
 
return '/路径'
})

模拟登录

// ⽤来模拟是否登录
 
const isLogin = true
router.beforeEach((to, from) => {
// 如果没有登录, 并且还要跳转

  if(!isLogin && to.path === '/my') {
    // 进⾏提⽰
    alert('请先登录')
    // 不放⾏(不跳转) 
    return false
  }
  // 正常放⾏
 
  return true
})

• to：即将进入的路由
• from:要离开的路由
• 回调函数的返回值:return false:不放行
          return true:放行
          return 路径：重定向到指定路由

完结撒花！🎉

如果这篇博客对你有帮助，不妨点个赞支持一下吧！👍
你的鼓励是我创作的最大动力～

✨ 想获取更多干货？ 欢迎关注我的专栏 → optimistic_chen

📌 收藏本文，下次需要时不迷路！

我们下期再见！💫 持续更新中......

---

悄悄说：点击主页有更多精彩内容哦～ 😊