Vue路由功能介绍

前言

我们在学习html文本标记语言的时候，我们了解到了一个超链接标签，也就是对应的<a>标签,那么大家在使用vue脚手架来创建vue项目的时候同样也会面临这种情况，就是跳转，这里就引入了Vue的路由功能

介绍

路由是一个涉及计算机网络的重要概念，特别是在数据通信网络中。以下是对路由的详细介绍：

• 路由的基本含义：路由指的是通过互联的网络将信息从源地址传输到目的地址的活动。这一活动发生在OSI网络参考模型的第三层，即网络层。
• 路由的功能：路由器是执行路由功能的关键设备。它们负责将具有IP特征的数据包根据目的网络的IP地址进行转发，确保数据包能够正确地送达目的地。
• 路由的工作原理：当路由器接收到一个IP数据包时，它会检查数据包中的目标IP地址，并在自己维护的路由表（Routing Table）中查找与之匹配的条目。如果找到了匹配项，路由器就会根据这个条目指示的出接口或下一跳IP地址转发数据包；如果没有找到匹配项，路由器则会丢弃数据包

Vue中的路由

在vue项目中提供了对应的vue的路由标签

这里的vuerouter旨在封装对应的路由项，即实现对应的路由表

整个流程就是由router-link来实现路由请求然后访问路由表在之后就是跟新页面来实现对应的新的路由页面的展示

而在前端的路由中对应的组件关系就是通过前端页面的网络路径之后的#后面的字母来进行匹配的

项目中的实际路由

首先我们在对应的main.js文件里面导入对应的router模块，但是这个在我们利用脚手架实现项目搭建的时候就已经实现了，所以不在需要我们自己导入了

然后就是router-link的标签，相当于a标签的<a herf="........."></a>这里的to是针对的vue前端路由的#后面的专属标记

但是到这里也仅仅是把他添加了对应的超链接而已，我们还需要配置对应的渲染展示

我们知道在项目里面他是默认执行的App.vue，然后根据我们传递的各种引入来实现页面的跳转。

这里我们不在需要引入其他的路径，仅仅需要把对应的router-view进行展示就可以

好的，到这里我们就完成了50%，因为我们前面介绍路由表的时候说到，他首先要进行对应的路由封装，后面的请求才可以成功，因为我们还需要进行对应的路由表的配置

在这里我们就是配置对应的路由路径，分为2中方式，第一种就是impoet引入，第二种就是componet函数引用。这里我用的是第二种。

  {
    path: '/dept',//路径地址后缀
    name: 'dept',//自己起的名字
    component:() =>import('../views/emply/DeptView.vue')//导入对应的完整路径
  },

然后我们来运行一下

ok，到这里我们可以看到对应的打开dept界面是的网址标志/dept

而此时就是/emp标记

到这里大家运行就会发现对应的路由已经实现了99%，到这里小伙伴们应该觉得我去终于好了，然后就把他进行了关闭，但是我们在打开就会失败显示空白页面，这里是因为他默认访问的路径是/,没有后缀的形式。所以我们说这里要引入对应的路由重定向

小bug---路由重定向

这里进需要再定义path为“/”的时候，添加一个redirect函数就可以啦

含义就是在访问这个“/”路径的时候，让他直接去访问另外一个，这里“/”就是相当于中转站啦

  {
    path: '/',
   redirect:'/dept'
  }

---

今日分享

https://mock.apifox.cn/m1/3128855-0-default/emp/list

这里是对应的json文件的路径

祝福

今天是1月的最后一天距离新年还有不到10天，祝大家在新年到来之际平安喜乐