【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