浅谈何为路由以及如何使用？

一. 路由的基本知识

1. 路由是什么？

（1）网络工程术语中的路由(Routing)

        ① 路由是指分组从源到目的地时，决定端到端路径的网络范围的进程。路由工作在OSI参考模型第三层——网络层的数据包转发设备。路由器通过转发数据包来实现网络互连。虽然路由器可以支持多种协议(如TCP/IP、IPXISPX、AppleTalk等协议)，但是在我国绝大多数路由器运行TCP/IP协议。路由器通常连接两个或多个由IP子网或点到点协议标识的逻辑端口，至少拥有1个物理端口。路由器根据收到数据包中的网络层地址以及路由器内部维护的路由表决定输出端口以及下一跳地址，并目重写链路层数据包头实现转发教据包。路由器通过动态维护路由表来反映当前的网络拓扑，并通过网络上其他路由器交换路由和链路信息来维护路由表。

        ② 作用：路由器能够连接不同类型的局域网和广域网，如以太网、ATM网、FDDI网、令牌环网等。不同类型的网络，其传送的数据单元——包(Packet)的格式和大小是不同的。就像公路运输是以汽车为单位装载货物，而铁路运输是以车皮为单位装载货物一样，从汽车运输改为铁路运输，必须把货物从汽车上放到火车车皮上，网络中的数据也是如此。数据从一种类型的网络传输至另种类型的网络，必须进行帧格式转换。路由器就有这种能力。实际上，我们所说的“互联网”，就是指各种路由器将各种不同的网络类型互相连接起来。

（2）web开发中的路由

        ① Web开发中的"路由"是一种机制，它负责将用户在浏览器地址栏输入的URL解析并映射到特定的资源、逻辑处理函数或者视图上，以此来决定向用户展示什么内容或执行什么动作。路由是Web应用程序的核心组件之一，它使得应用能够根据不同的URL路径提供不同的响应。路由是Web应用中连接用户请求与应用响应的关键桥梁，对于构建高效、易用且可维护的Web服务至关重要。

        ② 作用（主要解决以下几个关键问题）：

             ★ 导航与页面切换：允许用户在Web应用的不同页面或视图之间平滑地导航，这对于提升用户体验至关重要。

             ★ 资源定位：确保对特定URL的请求能够找到正确的处理程序或数据，这是构建动态网站的基础。

             ★ 应用结构组织：通过定义清晰的URL模式，可以帮助开发者更好地组织和管理应用的结构，使得应用易于维护和扩展。

             ★ 前后端分离：在现代Web开发中，特别是单页应用（SPA）中，前端路由使得可以在不重新加载整个页面的情况下改变UI状态和数据显示，提高了效率和用户体验。

             ★ 搜索引擎优化（SEO）：通过设置有意义的、描述性的URL，有助于搜索引擎理解页面内容，进而提升搜索排名。

             ★ 权限控制与访问管理：路由系统也可以集成权限验证逻辑，限制对某些页面或资源的访问，增强应用的安全性。

（3）vue环境中的路由

        ① 路由就是组件与url地址的一种映射关系；② 对于单页面应用程序来说，组件与组件之间的跳转规则就是路由；③ Vue 路由允许我们通过不同的 URL 访问不同的内容(组件)，通过 Vue 可以实现多视图的单页 Web 应用（single page web application，SPA）。

二. web开发中vue路由如何使用

     ★ 在Vue.js中，使用Vue Router可以让你用 Vue.js 创建单页应用，管理不同URL的路由。以下是如何使用Vue Router的基本步骤：

        1. 安装Vue Router：要在Vue项目中安装Vue Router，您需要使用npm或yarn。确保您已经有一个Vue项目，然后在命令行中运行以下命令来安装Vue Router。

                ① 使用npm：npm install vue-router ；

                ② 使用yarn：yarn add vue-router。

        2. 在你的Vue项目中设置Vue Router：

        3. 在你的Vue组件中使用路由链接：

        4. 在你的Vue组件中使用路由出口来显示当前路由匹配到的组件内容。

                ★ 以上是Vue Router的基本使用方法，具体应用时可以根据需要添加更多的路由配置、导航守卫等功能。

三. 其他有关路由的补充

        1. 命令路由： 

             ★ 在定义路由信息时，可以给每条路由起个名字，这时，这条路由就叫做命名路由，不管在什么情况下，最好的处理就是使用命名路由。
             ★ 例如：   {
                                    path:'/mine/:userid',
                                    name:'mine',
                                    component: Mine
                        }

        2. 两个与路由相关的对象

                $route 路由信息
                $router 路由对象

        3. <router-link>属性补充

             ① to 规定跳转到的url地址
              值：
                ★ 字符串值
                    <router-link class="btn btn-default" to="/">首页</router-link>

                ★ 绑定属性
                    ☆ <router-link class="btn btn-default" :to="{path:'/'}">首页</router-link>
               
                    ☆ <router-link class="btn btn-default" :to="{name:'home'}">首页</router-link>        注：命名路由更推荐

             ② replace 执行页面栈的替换动作

        4. 动态路由匹配 (路由传参)

                ① 第一是你的路由信息允许传参
                    {
                        path:'/mine/:userid',
                        component: Mine
                    }
                ② 第二是如何传参
                    ★ <router-link class="btn btn-default" to="/mine/12" replace>我的</router-link>

                    ★ 绑定传参
                         <router-link class="btn btn-default" :to="{path:'/mine/12'}" replace>我的</router-link>

                    ★ 绑定传参 —— 命名路由传参
                        <router-link class="btn btn-default" :to="{name:'mine', params:{userid:11}}" replace>我的</router-link>

                ③ 第三是如何获取参数 （对应的路由组件中获取参数）
                            路由组件中的 $route.params

        5. query传参

                ① 传参
                    <router-link class="btn btn-default" to="/news?id=10">新闻</router-link>
                ② 接收
                    this.$route.query

        6. 路由组件的重复调用

                ★ 当你从：/detail/1 到 /detail/2 的时候，因为使用的都是同一个路由组件，比起销毁重建，组件复用更有性价比，但是，这有一个小问题：因为组件被复用，所以，生命周期钩子函数只会触发一次。
                解决：
                    通过监听路由参数的变化，完成响应的逻辑处理
                            this.$watch(() => {
                                return '你要监听的值'
                            },(newValue,oldValue) => {
                                // 你监听的值变化时的响应逻辑
                            })

        7. 路由参数数量不固定

                ★ 使用三个正则的数量修饰符
                        * 0个或多个
                        + 1个或多个
                        ? 0个或1个

        8. 编程式导航(js跳转)

                ① this.$router.push()
           

            
                ② this.$router.replace()
            

                ③ this.$route.go()
            

        9. 开启props接收路由参数

（1）路由规则与接收

                ① 路由规则：
           

                ② 接收：    
           

 （2） 在Vue.js中，如果你想要在组件中接收由路由参数传递的数据，你可以使用props来实现。

        ① 首先，确保你已经安装并设置了vue-router，然后，在路由定义中，你可以使用props: true来启用props传递。 

        ② 在你的组件中，你可以通过this.$route.params来接收路由参数：

        ③ 如果你想要对传递的参数进行处理，你可以在路由的props选项中使用一个函数来返回你想要的参数： 

        ④ 然后在你的组件中，你将会接收到一个名为customId的prop： 

             注：这样，你就可以在你的组件中接收并使用由路由传递的参数了。