# learnVueRouter4

**Repository Path**: Tina-han/learn-vue-router4

## Basic Information

- **Project Name**: learnVueRouter4
- **Description**: 学习vue-router4
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-26
- **Last Updated**: 2024-12-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue-router4

## README

# 学习vue-router@4
### 路由组件传参
#### 将 props 传递给路由组件
<span style='color:red'>1.给需要传参的路由组件添加props属性，值为true</span>
<span style='color:red'>2.组件中使用defineProps接收路由参数</span>
```
const routes = [
  { path: '/users/:id', component: User，props:true },
]
组件中使用Props接收路由参数
<!-- User.vue -->
<script setup>
defineProps({
  id: String
})
</script>

<template>
  <div>
    User {{ id }}
  </div>
</template>
```

注：如果是命名视图的路由，必须给每个命名视图定义props配置

```
const routes = [
  {
    path: '/user/:id',
    components: { default: User, sidebar: Sidebar },
    props: { default: true, sidebar: false }
  }
]
```
**props对象模式**
```
const routes = [
  {
    path: '/promotion/from-newsletter',
    component: Promotion,
    props: { newsletterPopup: false }
  }
]
组件中接收 Props
<!-- Promotion.vue -->
<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  newsletterPopup: Boolean
});
</script>

<template>
  <div>
    <p v-if="newsletterPopup">Newsletter Popup is enabled</p>
    <p v-else>Newsletter Popup is disabled</p>
  </div>
</template>
```
**props函数模式**
```
const routes = [
  {
    path: '/search',
    component: SearchUser,
    props: route => ({ query: route.query.q })
  }
]
组件中接收 Props
<!-- User.vue -->
<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  userId: Number
});
</script>

<template>
  <div>
    User ID: {{ userId }}
  </div>
</template>
```
总结
对象模式：

适用场景：传递静态数据。
示例：props: { newsletterPopup: false }

函数模式：

适用场景：传递动态数据，依赖于路由参数或其他动态逻辑。
示例：props: route => ({ userId: parseInt(route.params.id) })

选择建议
静态数据：使用对象模式，因为它更简洁且易于理解。
动态数据：使用函数模式，因为它允许你根据路由参数或其他动态数据来计算和传递 props。
#### 通过 RouterView
```
<RouterView v-slot="{ Component }">
  <component
    :is="Component"
    view-prop="value"
   />
</RouterView>
```

注：
在这种情况下，所有视图组件都会接收到 view-prop。通常这并不是一个好主意，因为这意味着所有的视图组件都声明了一个 view-prop prop，但这未必需要。所以请尽可能使用上述的其他选项。

### 匹配当前路由的链接

在 Vue Router 中，activeClass、exactActiveClass、linkActiveClass 和 linkExactActiveClass 是用于自定义 router-link 激活状态的 CSS 类的属性。这些属性允许你更灵活地控制 router-link 的样式。以下是每个属性的详细用法和示例：

属性说明
activeClass：
用于设置 router-link 在部分匹配时应用的 CSS 类。
默认值为 router-link-active。

exactActiveClass：
用于设置 router-link 在完全匹配时应用的 CSS 类。
默认值为 router-link-exact-active。

linkActiveClass：
用于设置 router-link 在部分匹配时应用的 CSS 类。
默认值为 router-link-active。
与 activeClass 功能相同，但通常在全局配置中使用。

linkExactActiveClass：
用于设置 router-link 在完全匹配时应用的 CSS 类。
默认值为 router-link-exact-active。
与 exactActiveClass 功能相同，但通常在全局配置中使用。

总结：
<span style='color:red'>默认配置-控制router-link 类名：router-link-active（部分匹配），router-link-exact-active（完全匹配）</span>
<span style='color:red'>全局配置-控制router-link 类名：linkActiveClass（部分匹配） 和 linkExactActiveClass （完全匹配）</span>
<span style='color:red'>单个配置-控制router-link 类名：activeClass（部分匹配） 和 exactActiveClass（完全匹配）</span>

单个配置能覆盖全局配置
![Alt text](image.png)
![Alt text](image-1.png)


### 不同的历史模式
‌Vue Router中的hash模式、history模式和html5模式的主要区别如下‌：
‌URL格式和浏览器行为‌：
    ‌Hash模式‌：URL中带有#符号和哈希值，例如http://xxxx.com/#/path。当哈希值发生变化时，浏览器不会向服务器发送请求，而是通过监听hashchange事件来进行路由导航。这种模式在所有浏览器中都能正常工作，包括一些较老的浏览器，但不利于SEO‌12。
    ‌History模式‌：URL中没有#符号，直接使用正常的URL地址，例如http://xxxx.com/path。当URL发生变化时，浏览器会向服务器发送请求，服务器需要配置相应的路由规则。这种模式需要现代浏览器的支持，且对SEO更友好‌。
    ‌HTML5模式‌：实际上是history模式的一种实现方式，利用HTML5的History API（如pushState和replaceState）来管理路由。这种模式下，URL更加美观且有利于SEO‌。
‌服务器配置‌：
    ‌Hash模式‌：不需要服务器配置，所有请求都会被解析到同一个HTML文件。这种模式下，哈希值的变化不会导致页面重新加载‌。
    ‌History模式‌：需要服务器配置来支持所有路由的返回页面。例如，在Nginx中需要将所有路径指向index.html文件。否则，刷新页面时会返回404错误‌。
‌适用场景‌：
    ‌Hash模式‌：适用于不需要服务器配置的单页面应用（SPA），如内部工具、管理后台等。由于URL中包含#符号，可能会影响URL的美观度‌。
    ‌History模式‌：适用于对SEO有要求的前端应用，如电商网站、博客等需要被搜索引擎索引的网站。这种模式下，URL更加简洁且有利于SEO优化‌。