【Vue】路由介绍 && vue-router使用 && 重定向 && 路由模式

原创

lirendada

发布于 2026-02-02 10:37:23

390

文章被收录于专栏：前端前端

Ⅰ. 基本介绍

一、单页应用程序介绍

1. 概念

单页应用程序：SPA（Single Page Application）是指所有的功能都在一个 HTML 页面上实现。

2. 具体示例

单页应用网站：网易云音乐 https://music.163.com/
多页应用网站：京东 https://jd.com/

3. 单页应用 vs 多页应用

单页应用类网站：系统类网站/内部网站/文档类网站/移动端站点
多页应用类网站：公司官网/电商类网站

二、路由介绍

1. 路由的介绍

生活中的路由：设备和 ip 的映射关系

Vue中的路由：路径和组件的映射关系

单页面应用程序，之所以开发效率高，性能好，用户体验好，最大的原因就是：页面按需更新

比如当点击【发现音乐】和【关注】时，只是局部更新内容，对于头部是不更新的，要按需更新，首先就需要明确：访问路径和组件的对应关系！

那访问路径和页面的对应关系如何确定呢？路由

2. 如何实现路由

使用 vue-router，当修改地址栏路径时，切换显示的组件即可。

3. 什么是`vue-router`

Vue Router

vue-router 是 Vue 官方的一个路由插件，是一个第三方包：

三、组件存放目录

1. 组件分类

将 .vue 文件分为两类，仅仅是为了便于理解和管理，但二者本质无区别

页面组件：配合路由切换，展示整个页面，不复用的
复用组件：用于组装页面组件，可复用的

2. 存放目录

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

Ⅱ. 基本使用和模块封装

一、基本使用(4+2)

1. 四个固定步骤

下载 VueRouter 模块
代码语言：javascript
复制
```
npm install vue-router
```

2. 导入相关函数

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

3. 创建路由实例

const router = createRouter({
  // 哈希模式, 路径带 #
  history: createWebHashHistory(),
  routes: [
    // 路由表规则, 即 path 与 component 的对应关系
  ]
})

4. 注册。将路由实例注册到应用中，让规则生效

app.use(router)

当完以上四步之后，就可以看到浏览器地址栏中的路径变成了 /#/ 的形式。这表示项目的路由已经被 Vue-Router 管理了。

2. 两个核心步骤

views 目录下，创建需要的页面组件，并配置路由规则

views/Find.vue文件：

<script setup></script>
<template>
  <div class="find">
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐...</p>
  </div>
</template>
<style scoped></style>

views/My.vue文件：

<script setup></script>
<template>
  <div class="my">
    <p>我的音乐</p>
    <p>我的音乐</p>
    <p>我的音乐...</p>
  </div>
</template>
<style scoped></style>

views/Friend.vue文件：

<script setup></script>
<template>
  <div class="friend">
    <p>朋友</p>
    <p>朋友</p>
    <p>朋友...</p>
  </div>
</template>
<style scoped></style>

main.js文件：

// 导入两个相关函数
// createRouter(): 创建路由实例
// createWebHashHistory(): 创建哈希模式的路由, 路径带 #
import { createRouter, createWebHashHistory } from 'vue-router'

// 导入 3 个页面组件
import Find from '@/views/Find.vue'
import Friend from '@/views/Friend.vue'
import My from '@/views/My.vue'

// 创建路由实例
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/find',
      component: Find
    },{
      path: '/my',
      component: My
    },{
      path: '/friend',
      component: Friend
    }
  ]
})

// 注册
app.use(router)

给路由出口（即路径匹配的组件，要显示的位置）

App.vue文件：

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

3. 路由运作原理

当浏览器 url 改变时，匹配路由表数组中的 path 值，如果命中了，则把相应的 component 渲染到 <router-view /> 的位置；否则显示空白。

二、抽离封装路由模块

1. 问题

路由配置代码都写在 main.js 中合适吗？显然不合适，会让 main.js 代码变得臃肿。

2. 目标

将路由模块抽离出来。好处：利于管理和维护

3. 代码示例

新建 router/index.js 文件：

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

// 注意: 脚手架环境下 @ 代指 src 目录，可以用于快速引入组件
import Find from '@/views/Find.vue'
import Friend from '@/views/Friend.vue'
import My from '@/views/My.vue'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/find',
      component: Find
    },
    {
      path: '/my',
      component: My
    },
    {
      path: '/friend',
      component: Friend
    }
  ]
})

// 导出路由实例
export default router

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

Ⅲ. 更多配置

一、重定向

1. 问题

在网页打开时，url 默认是 / 路径，未匹配到组件时，会出现空白内容，如下所示：

2. 解决方案

重定向：匹配 / 后，强制跳转到其它页面，比如跳转到 /find 路径，避免页面空白。

3. 语法

在创建路由 createRouter() 时候添加对 / 的重定向路径，如下所示：

const router = createRouter({
    ...
    routes: [
        // 访问 / , 自动跳转到 /find
        {
            path: '/', 
            redirect: '/find'
        },
        ...
    ]
})

二、404页面

1. 作用

当路径找不到匹配时，给个提示页面.

2. 语法

① Vue Router 3（Vue2 生态）

{ path: '*', component: _404 }

* 通配符写法，只能用在最后一条路由。
匹配任意路径，通常用于 404。
缺点：没法拿到具体被匹配的路径字符串。

② Vue Router 4（Vue3 生态）

{ path: '/:pathMatch(.*)*', component: NotFound }
{ path: '/user-:afterUser(.*)', component: UserGeneric }

用正则样式的参数写法。
/:pathMatch(.*)* 表示 "匹配所有路径片段"，结果会放在 route.params.pathMatch 里。
/user-:afterUser(.*) 表示匹配 /user-xxx 开头的路径，并把 xxx 后面部分存在 params.afterUser
- :afterUser → 这是一个动态路由参数名，访问时的值会放到 route.params.afterUser。
- (.*) → 这是一个 正则表达式，约束参数可以匹配的内容。
  - . 表示任意字符
  - * 表示出现 0 次或多次
  - 所以 (.*) 就是 "匹配任意长度的字符串"
优点：更灵活，可以在 404 页面显示 "你访问的路径是 xxx"。

两种语法的区别

path: '*' → Vue Router 3 的老写法，简单粗暴，只能兜底。
/:pathMatch(.*)* → Vue Router 4 的推荐写法，支持参数提取和更强的模式匹配。

实例代码

views/404.vue文件：

<script setup> </script>
<template>
  <div>
    <h3>404</h3>
    <p> 你访问的页面去了月球 </p>
    <router-link to="/"> 去首页 </router-link>
  </div>
</template>

router/index.js文件：

import _404 from '@/views/404'

const router = createRouter({
  routes: [
    ...
    {
        path: '/:pathmatch(.*)*',
        component: _404
    }
  ]
})

export default router

三、路由模式

1. 问题

路由的路径看起来不好看，开头有 #，能否切成真正路径形式？

hash路由（默认），例如：http://localhost:5173/#/find，不够美观！
history路由（开发常用），例如：http://localhost:8080/find（缺点是刷新或直接访问时会请求服务器，需要后端配置 history fallback）

2. 语法

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

const router = createRouter({
    // 历史模式: createWebHistory(), 路径带 #
    // 哈希模式: createWebHashHistory(), 路径不带 #
    // history: createWebHashHistory(),
    history: createWebHistory(),
    ...
})

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端

腾讯技术创作特训营S17

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端

腾讯技术创作特训营S17

登录后参与评论

0 条评论

热度