一、VueRouter实现多个页面

VueRouter引入步骤：

1、了解Vue.js中的路由管理
2、掌握VueRouter的安装和配置
3、掌握在Vue.js中使用VueRouter

什么是路由

路由（Routing）是指在网络中，将数据包（packet）从源地址发送到目标地址的过程。它涉及到确定数据在网络中传输的最佳路径。在计算机网络中，路由器（Router）是执行路由功能的设备。

Vue中的路由管理：Vue Router是Vue.js官方的路由管理器

设置路由规则：

第一步，设置路由规则
第二步，配置路由规则
第三步，设置路由切换后页面的显示位置
第四步，在模板中实现路由跳转

动态路由匹配

动态路由匹配是一种在定义路由时使用动态参数的技术，它可以匹配多个路径，而不需要为每一个可能的路径单独定义一个路由。这种技术在现代Web开发中非常有用，特别是在构建单页面应用程序（SPA）时。

动态路由匹配是一种强大而灵活的技术，可以显著提高Web应用程序的可维护性和用户体验。在开发过程中，应该根据具体需求和应用场景来合理使用动态路由匹配技术。

params和query的区别

（1）定义与用途

params（路径参数）：

        定义：用于指定路由的一部分，通常用于标识特定资源。

        用途：在RESTful API或Web应用中，路径参数常用于指定要操作的资源ID或名称。

query（查询参数）：

        定义：用于向服务器请求附加信息，以键值对的形式出现在URL的问号之后。

        用途：传递额外的查询条件、过滤选项、排序方式等附加信息。

（2）URL表现形式

params：

        URL路径的一部分，不会显示属性（在某些框架中可能表现为URL的一部分，而不是查询字符串）。

        例如：/users/{id}，其中{id}是一个路径参数。

query：

        以键值对的形式出现在URL的查询字符串中。

        例如：https://example.com/search?query=example，其中query=example是一个查询参数。

（3）使用场景

params：

        当需要在URL中直接标识特定资源时，使用路径参数。

        例如，在博客应用中，使用路径参数来指定文章ID：/articles/{id}。

        在RESTful API中，路径参数常用于指定特定资源的操作，如GET /users/{id}用于获取特定用户的信息。

query：

        当需要向服务器传递附加信息时，使用查询参数。

        例如，在电子商务网站中，使用查询参数传递用户的搜索关键字来获取相应产品列表：/products?search=keyword。

        查询参数还常用于过滤和排序结果，如指定排序方式、过滤条件等：/products?sort=price&category=electronics。

（4）传递方式与接收

params：

        通常通过URL路径直接传递，不需要问号（?）和等号（=）。

        在后端框架中，路径参数通常通过路由配置来接收和处理。

query：

        以键值对的形式通过URL的查询字符串传递。

        在后端框架中，查询参数可以通过解析URL的查询字符串来获取。

二、景点详情页面开发

景点搜索页面步骤：

第一步，查找Vant中可以使用的组件
第二步，实现组件模板部分
第三步，模型层准备数据
第四步，模拟数据，实现效果