Vue.js教程-Vue-router

路由

什么是路由

• 路由是通过互联的网把信息从源地址传输到目的地址的活动。
• 路由中有路由表(映射表)，决定了数据的指向。
• 路由经常发生在第三层(网络层)，而与它经常做比较的是桥接，桥接是发生在第二层(数据链路层)。

后端路由阶段

• 使用服务器直接渲染对应的HTML页面，并返回给客户端进行显示。
• 每次在地址栏中切换url时都会向服务器发送请求，随后后台将拼接好的html页面返回到前端，也就意味着刷新界面。每次请求服务器都会交给一个正则对应的Controller进行处理。
• 后端渲染好的页面不需要单独加载任何的js和css，浏览器可以直接展示。
• 缺点：
  • 如果网速不够的话，可能出现白屏，也就是对应页面没有刷新出来。后端路由阶段的特点是，html和数据的拼接都由服务器完成，所以后端的压力非常大。
  • 有可能整个页面也由后端人员来写，工作量特别大，维护也需要后端来做，那要前端开发人员有啥用。
  • 前端开发人员需要使用PHP或者Java等语言编写页面代码。
  • 这种情况下html和数据经常混在一起，开发的时候会出现后端人员和前端人员在各自开发中编写了相同的逻辑函数，导致冲突；维护的时候则需要前后端一起维护，成本太高了。
• 以后的文章会讲一下为什么JSP+Servlet被时代抛弃了。

前端路由阶段

• 后端路由阶段对后端开发人员极为不友好，工作量太大。随着Ajax的出现，开始了前后端分离的阶段，只需要通过Ajax进行数据传递，在前端使用JavaScript或TypeScript把数据渲染到页面进行展示。
• Ajax让前后端的职责变得互不干预，只需要一起确定接口就能各自进行开发，前端负责逻辑交互和可视化上，后端负责数据处理。
• 在维护时哪里出问题了也能快速找到对应的模块和相应开发人员。
• ==单页面富应用：==其实就是在前后端分离的基础上加了前端路由，前端路由的功能就是改变url时刷新对应的组件，而不是页面的整体刷新。

url的两种模式

hash

• hash就是锚点(#)，改变了href的内容，但实际上我们发现，很少有路径里存在==#==，说明这种方式并不常用。
• 可以通过location.href来对href进行赋值，这样可以达到改变url但不刷新页面。
• 例子：localhost:8080/#/Home

history

• 例子：localhost:8080
• history.pushState({},'','/Home')：例子变成localhost:8080/Home
• history.replaceState({},'','/My')：上一个方法中的url变成localhost:8080/My，就是将当前的url路径替换。
• history.go()：history.go(-1)=history.back()，history.go(1)=history.forward()，这两个方法就是前进后退。

Vue-router

介绍

• Vue-router官方介绍
• vue-router是Vue的官方路由插件，在Vue中，页面路径的改变就是组件的切换刷新，让路径和组件形成一种映射。

安装Vue-router

• 如果初始化项目时没有选择安装vue-router，那么后期如果需要使用路由该怎么安装呢？在VSCode的终端里输入npm install vue-router --save，等待安装完即可。
• 在等待安装的过程中在src文件夹下创建index.js文件，目的是编写路由相关配置和把url与路径形成映射。
  
  
• 上图中的router的mode选择history，因为路径好看呀！
• 最后在main.js里添加，添加后的图：
  

使用router

• 我们需要在上图中的const routes = []里面添加router对象：
  
• path代表着url，component代表这个url下的组件，切换url时显示的就是这个component，component:后面加的是引入的组件名。
• ==例子：==第四行使用箭头函数引入对应的组件，routes数组中的两个router对象，第一个的router对象的功能是进行重定向，当运行程序时，如果默认的url是空，那么就会重定向到redirect后的url中，第二个router对象就是正常书写的。
  
• 最后，使用路由，在APP.vue中使用
  
• 这样就能显示出Home的内容。

路由跳转

• 使用this.$router.push('url')，url必须是在index.js中存在于router对象的path，切记这里是router而不是route。

嵌套路由

• router对象中有一个属性是children，它是数组，数组里存的也是router对象，使用方法与上面写的一样的。如图：
  

router与route的区别

• 在上面使用路由跳转的时候我说了切记使用$router，那么它们有什么区别呢？？？
• $router为VueRouter实例，想要导航到不同URL就用这个。
• $route为当前router跳转对象里面可以获取name、path、query、params等。

总结

• 这里面仅介绍了基础知识，例如导航守卫等高级一点的基础功能这里没有写，等以后写项目教程时再给大家讲。