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

Ⅰ. 基本介绍

一、单页应用程序介绍

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. 存放目录

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

​

Ⅱ. 基本使用和模块封装

一、基本使用(4+2)

1. 四个固定步骤

1. 下载VueRouter模块

   npminstallvue-router

2. 导入相关函数

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

3. 创建路由实例

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

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

   app.use(router)

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

2. 两个核心步骤

1. views目录下，创建需要的页面组件，并配置路由规则
   
   views/Find.vue文件：

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

views/My.vue文件：

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

views/Friend.vue文件：

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

main.js文件：

// 导入两个相关函数// createRouter(): 创建路由实例// createWebHashHistory(): 创建哈希模式的路由, 路径带 #import{createRouter,createWebHashHistory}from'vue-router'// 导入 3 个页面组件importFindfrom'@/views/Find.vue'importFriendfrom'@/views/Friend.vue'importMyfrom'@/views/My.vue'// 创建路由实例constrouter=createRouter({history:createWebHashHistory(),routes:[{path:'/find',component:Find},{path:'/my',component:My},{path:'/friend',component:Friend}]})// 注册app.use(router)

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

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 目录，可以用于快速引入组件importFindfrom'@/views/Find.vue'importFriendfrom'@/views/Friend.vue'importMyfrom'@/views/My.vue'constrouter=createRouter({history:createWebHashHistory(),routes:[{path:'/find',component:Find},{path:'/my',component:My},{path:'/friend',component:Friend}]})// 导出路由实例exportdefaultrouter

main.js文件：

import{createApp}from'vue'importAppfrom'./App.vue'// 导入路由实例importrouterfrom'./router'constapp=createApp(App)// 注册app.use(router)app.mount('#app')

Ⅲ. 更多配置

一、重定向

1. 问题

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

2. 解决方案

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

3. 语法

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

constrouter=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_404from'@/views/404'constrouter=createRouter({routes:[...{path:'/:pathmatch(.*)*',component:_404}]})exportdefaultrouter

三、路由模式

1. 问题

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

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

2. 语法

import{createRouter,createWebHashHistory,createWebHistory}from'vue-router'constrouter=createRouter({// 历史模式: createWebHistory(), 路径带 #// 哈希模式: createWebHashHistory(), 路径不带 #// history: createWebHashHistory(),history:createWebHistory(),...})