关于vue3-router的基础知识点以及注意事项

本周在写项目的过程中，由于新增了几个页面，所以需要在路由中配置新的路由，又因为有几个页面在不同的路由层级上，所以起的名字是相同的，因此我在添加路由的过程中就将name属性设置成为相同的，这就导致一旦我切换到该路由，就报404。经过我的各种检查，包括component的路径，单词拼写等等各种错误，确认其他没有任何错误，但是还是出错。经过我不懈的努力，最终无意间修改了其中一个name属性的名字，结果改路由就生效了。我觉得可能当时学习的时候学的比较浅，所以在空闲时间对router进行了新的了解，在此记录学习的内容。

1.路由的概念

说起路由，大家第一反应应该就是家里的路由器，那路由器的作用是什么呢？路由器是一种网络设备，负责管理和转发网络数据包的传输。而vue中的路由和这个作用类似：路由用来管理应用的页面导航，使用户可以在单页面应用中通过不同的 URL 地址访问不同的页面或组件。

何为单页面应用呢？在以前，电脑网页之间切换页面都是通过跳转不同的页面来实现的，每次跳转的都是一个新页面，直接造成的问题就是加载速度慢。而单页面应用顾名思义就是对于同一类型的页面只需要一个页面就可以实现，而路由就负责接受你点击后触发的路由导航，并且切换到相应导航的页面。

2.路由模式

主要了解的是哈希（hash）和历史（history）模式

2.1.hash模式

哈希模式特点就是可以记录每次访问的页面，可以在浏览器中实现前进和后退，缺点是url中会出现一个“#”，不美观。

2.2.history模式

history不会保留每次访问的页面，也就是不能在浏览器中实现前进和后退，url中没有“#”，但是对于需要从url中传递的参数来说，如果使用history模式直接刷新，那么就会出错。

3.路由的属性和注意事项。

路由中属性有很多，用来配置路由各种各样的功能：

3.1.path：

作用：定义访问 URL 的路径，例如/home，/login等

注意点：必须惟一！可以携带参数，例如/home/:id,/home/*等，在路由所表示的页面中可以通过下方代码接受该参数：

import { useRoute } from 'vue-router';
const route = useRoute();
const userId = route.params.id;  // 获取参数id

3.2.name：

作用：为路由命名，便于使用 name 访问路由，减少对路径的依赖。

注意点：必须惟一！！（我本次错误就是由name属性引起的）

3.3.component：

作用：指定该路由path匹配的组件

注意点：可以使用 import() 进行按需加载以优化性能。

3.4.redirect：

作用：重定向，当点击当前path时，重定向到redirect指向的页面。

注意点：可以重定向到其他任意一级路由，一般是重定向到子路由。

3.5.meta：

作用：用于设置路由的元信息，通常包含一些附加信息，比如是否需要登录、权限、页面标题等。

注意点：meta 是用户自定义字段，可以存放任意数据，结合导航守卫控制路由权限较常用。

3.6.children：

作用：用来配置当前路由的子路由，子路由和父路由都可以使用所有的路由属性。

本次内容很简单，主要的就是每个属性的注意点，过程中出现的错误还请大家指出。