【Vue】- 路由及传参

---

知识回顾

前言

什么是单页面应用程序?
● 所有功能在一个html页面上实现
单页面应用优缺点?
● 优点：按需更新性能高，开发效率高，用户体验好
● 缺点：学习成本，首屏加载慢，不利于SEO
应用场景?
● 系统类网站 / 内部网站 / 文档类网站 /移动端站点

什么是路由？
○ 路由是一种映射关系
Vue中的路由是什么?
○ 路径和组件 的映射关系
○ 根据路由就能知道不同路径的，应该匹配渲染哪个组件

如何实现路径改变，对应组件切换,应该使用哪个插件?
○ Vue 官方插件 VueRouter
Vue-Router的使用步骤是什么?
○ 下载vue-router —> 创建路由器实例 —> 注册路由器插件
○ 创建需要的组件 (views目录)，配置路由规则 —> 配置导航，配置路由出口

---

源码分析

1. 声明式导航

vue-router 提供了一个全局组件 router-link (取代 a 标签)
● 能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签 ，to 无需 #
● 能高亮，默认就会提供高亮类名，可以直接设置高亮样式
语法： 发现音乐

<div><div class="footer_wrap"><router-link to="/find">发现音乐</router-link><router-link to="/my">我的音乐</router-link><router-link to="/friend">朋友</router-link></div><div class="top"><!-- 路由出口 → 匹配的组件所展示的位置 --><router-view></router-view></div>
</div>

2. 路由传参

普通传参

<router-link to="/path?参数名=值"></router-link>
● 如何接受参数固定用法：$route.query.参数名

<script setup lang="ts"></script><template><div class="home"><div class="logo-box"></div><div class="search-box"><input type="text"><button>搜索一下</button></div><div class="hot-link">热门搜索：<router-link to="/search?keyword=苹果">apple</router-link><router-link to="/search?keyword=橙子">orange</router-link><router-link to="/search?keyword=香蕉">blanana</router-link></div></div><div class="top"><router-view></router-view></div