【vue】vue-router_ vue3路由管理器

代码获取

vue-router_ vue3路由管理器

⼀、基本介绍

1. 单⻚应⽤程序介绍

1.1 概念

单⻚应⽤程序：SPA(Single Page Application)是指所有的功能都在⼀个HTML⻚⾯上实现

1.2 具体⽰例

单⻚应⽤⽹站： ⽹易云⾳乐 https://music.163.com/

多⻚应⽤⽹站： 京东 https://jd.com/

1.3 单⻚应⽤ VS 多⻚应⽤

开发分类	实现方式	页面性能	开发效率	用户体验	学习成本	首屏加载	SEO
单页	一个 Html 页面	按需更新 性能高	高	非常好	高	慢	差
多页	多个 Html 页面	整页更新 性能低	中等	一般	中等	快	优

单⻚应⽤类⽹站：系统类⽹站 / 内部⽹站 / ⽂档类⽹站 / 移动端站点

多⻚应⽤类⽹站：公司官⽹ / 电商类⽹站

1.4 总结

1. 什么是单⻚⾯应⽤程序?

​ 答：所有的功能都在⼀个html⻚⾯上

2. 单⻚⾯应⽤优缺点?

​ 答：1、优点：体验好、开发效率⾼

​ 2、缺点：⾸屏加载相对较慢、不利于SEO

3. 单⻚应⽤场景？

​ 答： 系统类⽹站 / 内部⽹站 / ⽂档类⽹站 / 移动端站点

2. 路由介绍

2.1 路由的介绍

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

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

单⻚⾯应⽤程序, 之所以开发效率⾼, 性能好, ⽤⼾体验好， 最⼤的原因就是: ⻚⾯按需更新

⽐如当点击【发现⾳乐】和【关注】时, 只是局部更新内容, 对于头部是不更新的，要按需更新, ⾸先就需要明确: 访问路径 和 组件的对应关系！访问路径和⻚⾯的对应关系如何确定呢？ 路由

2.2 如何实现路由

借助 vue3 的好基友 vue-router, 当修改地址栏路径时，切换显⽰的组件

2.3 介绍vue-router

官网

2.4 总结

1. 什么是路由？

​ 答：⼀种映射(对应)关系

2. Vue中的路由是什么

​ 答：路径和⻚⾯的映射关系

3. vue-router是什么？

​ 答：vue的官⽅路由

3. 组件存放⽬录

3.1 组件分类

⼈为的把 .vue ⽂件分为两类, 仅仅是为了便于理解和管理, 但⼆者本质⽆区别

• ⻚⾯组件: 配合路由切换, 展⽰整个⻚⾯, 不复⽤的•

• 复⽤组件: ⽤于组装⻚⾯组件, 可复⽤的

3.2 存放⽬录

1. ⻚⾯组件 - ⻚⾯展⽰ - 配合路由使⽤

​ 放置在 src/views ⽬录下

2. 复⽤组件 - ⽤于组装⻚⾯组件

​ 放置在 src/components ⽬录下

3.3 总结

1. 组件分为哪两类？分类的⽬的？

​ 答：⻚⾯组件、复⽤组件; 便于管理

2. 不同分类的组件应该放在什么⽂件夹？作⽤分别是什么？

​ 答： 1、 ⻚⾯组件 -> src/views -> 配合路由切换

​ 2、 复⽤组件 -> src/components -> 组装⻚⾯组件

⼆、基本使⽤和模块封装

1. 基本使⽤(4+2)

1.1 四个固定步骤

如下4个固定的步骤

1. 下载 VueRouter 模块

yarn add vue-router

2. 导⼊相关函数

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

3. 创建路由实例

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

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

app.use(router)

当完以上 4 步之后, 就可以看到浏览器地址栏中的路径变成了 /#/的形式。

表⽰项⽬的路由已经被 Vue-Router 管理了

1.2 两个核⼼步骤

1. 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)

2. 给路由出⼝(路径匹配的组件, 显⽰的位置)

App.vue

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

1.3 路由运作原理

当浏览器url改变时, 匹配路由表数组中的path值，如果命中了，

则把相应的component渲染到 <router-view /> 的位置；否则显⽰空⽩

1.4 总结

1. 如何实现 路径改变，对应组件 切换,应该使⽤哪个插件?

​ 答： vue-router

2. vue-router的使⽤步骤是什么(4+2)?

​ 答：下载->导⼊->创建->注册-> 配置规则表->给出⼝

2. 抽离封装路由模块

2.1 问题

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

2.2 ⽬标

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

2.3 代码⽰例

新建 router/index.js

// 添加路由功能配置
import { createRouter, createWebHashHistory } from "vue-router";
// 注意: 脚⼿架环境下 @ 代指 src ⽬录，可以⽤于快速引⼊组件
// 导入 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: "/friend",component: Friend},{path: "/my",component: My}]
})
// 导出路由实例
export default router;

main.js

import App from "./App.vue";
import { createApp } from "vue";
import router from "./router/index.js";// 创建应用实例
const app = createApp(App);// 注册
app.use(router);app.mount("#app");

2.4 总结

1. 封装抽离路由模块的好处是什么？

​ 答：便于管理、维护

2. 以后如何快速引⼊组件？

​ 答：可以借助 @ 代指 src ⽬录

三、声明式导航与传参

1. 声明式导航

1.1 问题

要⼿动输⼊地址，切换⻚⾯，不合理吧？能否点击链接进⾏跳转

1.2 解决⽅案

vue-router 提供了⼀个全局组件 router-link, ⽤于点击跳转，需添加 to 属性指定路径 ,

其本质还是 a 标签

语法： <router-link to=“path值”> xxx </router-link>

<!-- App.vue --><script setup></script>
<template><nav><router-link to="/find">发现⾳乐</router-link><router-link to="/my">我的⾳乐</router-link><router-link to="/friend">朋友</router-link></nav><!-- ⼀级路由出⼝ --><router-view />
</template>
<style>
nav a {color: #333;text-decoration: none;
}nav a:nth-child(2) {margin: 0 80px;
}nav a.router-link-active {background: red;color: #fff;
}
</style>

1.3 ⾃带⾼亮类名

使⽤router-link跳转后，我们发现。当前点击的链接默认加了两个class的值router-link-exact-active 和 router-link-active ,

我们可以给任意⼀个class属性添加⾼亮样式即可实现功能

1.4 总结

1. router-link是什么？

​ 答： 声明式导航 , 点击跳转路由的

2. router-link怎么⽤？

​ 答：添加 to 属性

3. router-link的好处是什么？

​ 答：⾃带 激活类名 , ⽅便实现⾼亮样式

2. 两个类名

当我们使⽤跳转时，⾃动给当前导航加了两个类名

2.1 router-link-active

模糊匹配

只要是以/find开头的路径都可以和 to="/find"匹配到

2.2 router-link-exact-active

精确匹配

to=“/find” 仅可以匹配 /find

2.3 总结

1. router-link 会⾃动给当前导航添加两个类名，有什么区别呢？

​ 答：1、 router-link-active : 模糊匹配

​ 2、 router-link-exact-active : 精确匹配

3. 声明式导航-传查询参

3.1 ⽬标

在跳转路由时，进⾏传参, ⽐如：现在我们在发现⾳乐⻚, 点击去朋友⻚, 并携带id, ⽅便后续查询详情,

如何传参？

3.2 跳转传参

我们可以通过两种⽅式，在跳转的时候把所需要的参数传到其他⻚⾯中

1. 查询参数传参

2. 动态路由传参

3.3 查询参数传参

传参(有2种格式)

a. 字符串

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

b. 对象

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

3.4 代码⽰例

App.vue

	<!-- 字符串 --><router-link to="/friend?id=10086"> 朋友 </router-link><!-- 对象 --><router-link :to="{path: '/friend',query: {id: 10086}}"> 朋友 </router-link>

Friend.vue

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.query.id)
</script>

3.5 总结

1. 路由查询参数如何传递？

​ 答：字符串: “/path?参数名=值” 或 对象: path+query

2. 查询参如何接收？

​ 答： route.query.参数名

4. 声明式导航-传动态参

4.1 动态路由传参⽅式

• 配置动态路由

• 动态路由后⾯的参数可以随便起名，但要有语义

routes: [{path: "/find/:id",component: Find}
]

• 传递参数(有2种格式)

a. 字符串

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

b. 对象

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

• 接收参数

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

4.2 总结

1. 路由动态参数如何传递？

​ 答：1、 /:参数名 先占位

​ 2、 字符串: “/path/具体值” 或 对象: name+params

2. 查询参如何接收？

​ 答： route.params.参数名

5. 查询参 VS 动态参

5.1 对⽐

1. 查询参数传参 (⽐较适合传多个参数)

​ a. 跳转：to=“/path?参数名=值&参数名2=值”

​ b. 获取：route.query.参数名

2. 动态路由传参 (优雅简洁，传单个参数⽐较⽅便)

​ a. 配置动态路由：path: “/path/:参数名”

​ b. 跳转：to=“/path/参数值”

​ c. 获取：route.params.参数名

3. 注意：动态路由也可以传多个参数，但⼀般只传⼀个

四、更多配置

1. 重定向

1.1 问题

⽹⻚打开时, url 默认是 / 路径, 未匹配到组件时, 会出现空⽩

1.2 解决⽅案

重定向: 匹配 / 后, ⽐如强制跳转 /find 路径, 避免⻚⾯空⽩

1.3 语法

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

1.4 代码⽰例

// 访问 / , ⾃动跳转到 /find
{ path: '/', redirect: '/find'},

2. 404

2.1 作⽤

当路径找不到匹配时，给个提⽰⻚⾯

2.2 位置

404的路由，虽然配置在任何⼀个位置都可以，但⼀般都配置在其他路由规则的最后⾯

2.3 语法

path: “*” (任意路径) ‒ 前⾯不匹配就命中最后这个

2.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 { createRouter, createWebHashHistory } from "vue-router";import _404 from "@/views/404.vue";
// 创建路由实例
const router = createRouter({history: createWebHashHistory(),routes: [...,{path: "/:pathMatch(.*)*",component: _404}]
})
// 导出路由实例
export default router;

3. 模式

3.1 问题

路由的路径看起来不好看, 有#, 能否切成真正路径形式?

hash路由(默认) 例如: http://localhost:5173/#/find

history路由(常⽤) 例如: http://localhost:8080/find (上线需要服务器端⽀持，开发环境Vite给规避掉了history模式的问题)

3.2 语法

// 添加路由功能配置
import { createRouter, createWebHashHistory,createWebHistory } from "vue-router";// 创建路由实例
const router = createRouter({// history: createWebHashHistory(), // hash 模式 URL 地址带 # 号history: createWebHistory(), // history 模式 URL 地址不带 # 号routes: [...]
})
// 导出路由实例
export default router;

五、编程式导航与传参

1. 编程式导航

1.1 问题

如何主动做路由跳转？⽐如：登录成功⾃动跳转⾄⾸⻚

1.2 解决⽅案

编程式导航： ⽤JS代码来进⾏跳转

1.3 语法

路由实例 router.push(路径)

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

1.4 代码⽰例

Find.vue

<script setup>
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';
// 组件挂载后, 延迟 2 秒, 自动跳转到 find
const router = useRouter();
onMounted(() =>{setTimeout(() => {// 1. 通过 router.push() 方法跳转到 findrouter.push('/find');// 2. 对象// router.push({ path: '/find' });// 3. 命名路由// router.push({ name: 'find' });}, 2000);
});
</script><template><div class="friend"><p>朋友</p><p>朋友</p><p>朋友...</p></div>
</template><style scoped></style>

1.5 总结

1. 编程式导航如何做路由跳转？

​ 答： router.push(字符串/对象)

2. 编程式导航传参

2.1 问题

编程式导航如何传参呢？

2.2 语法

与 声明式导航<router-link> 传参和接参⽅式完全⼀样，既⽀持字符串, 也⽀持对象

router.push('/path?参数名=值')router.push({path: '/path',query：{参数名: 值
...
}
})router.push({name: '路由名称',params: {参数名: 值}
})

2.3 代码⽰例

2.3.1 查询参数

router/index.js

createRouter({routes: [{ path: '/friend', component: Friend }]
})

Find.vue

router.push('/friend?fid=110')router.push({path: '/friend',query: {fid: 101}
})

Friend.vue

<script setup>import {useRoute} from 'vue-router'const route = useRoute()console.log(route.query.fid)
</script>

2.3.2 动态参数

router/index.js

createRouter({routes: [{// 命名路由name: 'Friend',path: '/friend/:id',component: Friend}]
})

Find.vue

router.push({name: 'Friend',params: {id: 101}
})

Friend.vue

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)
</script>

2.4 总结

1. 编程式导航如何传参和接参？

​ 答：同声明式导航完全⼀样, router.push(字符串/对象)

六、嵌套与守卫

1. 嵌套

1.1 问题

能否在⼀个路由⻚⾯中，再进⾏⼀套路由的切换呢？⽐如 ⽹易云⾳乐 的发现⾳乐⻚

1.2 效果图

1.3 步骤

1. 创建3个⼆级路由⻚⾯组件(Recommend、Ranking、SongList)

2. 路由表数组中, 在相应的⼀级路由规则中, 配置 children 规则

3. 在相应的⼀级路由⻚⾯组件中, 给⼆级路由 出⼝和导航链接

注意：

1、 ⼆级路由的 path 推荐 不加 /

2、 做路由跳转的时候要写 完整路径(⽗路径+当前路径)

3、 防⽌⼆级路由⻚⾯空⽩, 给默认显⽰的⼀级路由 添加重定向

1.4 代码⽰例

views/Recommend.vue

<script setup></script><template><div class="recommend"><h5>推荐</h5><h5>推荐</h5><h5>推荐</h5></div>
</template><style scoped></style>

views/Ranking.vue

<script setup></script><template><div class="ranking"><h5>排⾏榜</h5><h5>排⾏榜</h5><h5>排⾏榜</h5></div>
</template><style scoped></style>

views/SongList.vue

<script setup></script><template><div class="songlist"><h5>歌单</h5><h5>歌单</h5><h5>歌单</h5></div>
</template><style scoped></style>

router/index.js

// 添加路由功能配置
import { createRouter, createWebHashHistory, createWebHistory } from "vue-router";
// 注意: 脚⼿架环境下 @ 代指 src ⽬录，可以⽤于快速引⼊组件
// 导入 3 个页面组件
import Find from "@/views/Find.vue";
import Friend from "@/views/Friend.vue";
import My from "@/views/My.vue";
import _404 from "@/views/404.vue";
import Recommend from "@/views/Recommend.vue";
import SongList from "@/views/SongList.vue";
import Ranking from "@/views/Ranking.vue";
// 创建路由实例
const router = createRouter({// history: createWebHashHistory(), // hash 模式 URL 地址带 # 号history: createWebHistory(), // history 模式 URL 地址不带 # 号routes: [{path: "/",redirect: "/find"},{path: "/find",component: Find,// 重定向, 防⽌⼆级路由空⽩redirect: "/find/recommend",// 嵌套路由children: [{path: "recommend",component: Recommend},{path: "ranking",component: Ranking},{path: "songList",component: SongList},]},{path: "/friend",component: Friend},{path: "/my",component: My},{path: "/:pathMatch(.*)*",component: _404}]
})
// 导出路由实例
export default router;

views/Find.vue

<script setup></script>
<template><div class="router2"><nav><router-link to="/find/recommend">推荐</router-link><router-link to="/find/ranking">排行榜</router-link><router-link to="/find/songList">歌单</router-link></nav><!-- 二级路由 --><router-view /></div></template>
<style scoped>.router2 {padding: 20px;background: #5177c7;
}nav a {color: #333;text-decoration: none;
}nav a:nth-child(2) {margin: 0 80px;
}nav a.router-link-active {background: red;color: #fff;
}
</style>

1.5 总结

1. 如何配置路由嵌套？

​ 答：配 children ，给路由 出⼝<router-view/>

2. 需要注意什么？

​ 答：⼆级 path 不加 / ; 跳转要写完成路径; 避免空⽩、要添加重定向

2. 路由守卫

2.1 问题

能否在访问某个路由前, 添加权限判断? ⽐如 我的⾳乐⻚, 只有登录了才可以访问

2.2 解决⽅案

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

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

2.3 代码⽰例

// ⽤来模拟是否登录
const isLogin = true
router.beforeEach((to, from) => {// 如果没有登录, 并且还要去 我的⾳乐⻚if (!isLogin && to.path === '/my') {// 进⾏提⽰alert('请先登录')// 不放⾏(不跳转)return false}// 正常放⾏return true
})

2.4 总结

1. 如何在访问路由前添加权限校验？

​ 答： 全局前置守卫 router.beforeEach((to, from) => { })

2. 参数 to、from 和 回调函数返回值 都表⽰什么？

to：即将进⼊的路由
from：正要离开的路由
回调函数返回值：return false: 不放⾏return true/undefined: 放⾏return 路径: 重定向到指定路由

nav a.router-link-active {
background: red;
color: #fff;
}

#### 1.5 总结1. 如何配置路由嵌套？​		答：配 children ，给路由 出⼝\<router-view/>2. 需要注意什么？​		答：⼆级 path 不加 / ; 跳转要写完成路径; 避免空⽩、要添加重定向### 2. 路由守卫#### 2.1 问题能否在访问某个路由前, 添加权限判断? ⽐如 我的⾳乐⻚, 只有登录了才可以访问#### 2.2 解决⽅案路由(导航)全局前置守卫: 每个路由在跳转前都会触发回调函数```js
router.beforeEach((to, from) => {// to: 即将要进⼊的路由// from: 当前正要离开的路由// false 取消导航(不发⽣跳转)return false// 正常放⾏、正常跳转return undefined | true// 重定向到指定的路由return '/路径'
})

2.3 代码⽰例

// ⽤来模拟是否登录
const isLogin = true
router.beforeEach((to, from) => {// 如果没有登录, 并且还要去 我的⾳乐⻚if (!isLogin && to.path === '/my') {// 进⾏提⽰alert('请先登录')// 不放⾏(不跳转)return false}// 正常放⾏return true
})

2.4 总结

1. 如何在访问路由前添加权限校验？

​ 答： 全局前置守卫 router.beforeEach((to, from) => { })

2. 参数 to、from 和 回调函数返回值 都表⽰什么？

to：即将进⼊的路由
from：正要离开的路由
回调函数返回值：return false: 不放⾏return true/undefined: 放⾏return 路径: 重定向到指定路由