后端路由阶段

• 我们知道，早期的网站开发整个HTML页面是由服务器端来渲染的
• 服务器直接生产渲染好对应的HTML页面，返回个哭护短进行展示
• 后端路由
  • 一个网页有着自己对应的网址，也就是url
  • url会发送到服务器端，服务器会通过正则对该URL进行匹配，并且最后交给一个controller进行处理
  • controller进行各种处理，最终生成HTML或者数据，返回给前端
    当我们页面中需要请求不同不同的路径内容时，交给服务器来处理，服务器渲染好整个页面，并且将页面返回个客户端，这种情况下渲染好的页面，不需要单独加载任何的js和css,可以直接交给浏览器来展示，这样有利于SEOd的优化
• 缺点
  • 一种情况是整个页面的模块都有后端人员来编写和维护
  • 另外一种情况就是前段开发人员如果要开发页面，需要通过PHP和java等语言来编写页面代码
  • 而且通常情况下，HTML代码和数据以及对应的逻辑会混淆爱一起，编写和维护都十分困难

后端渲染

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18597.html

前后端分离阶段

后端只负责提供数据，不负责任何阶段的内容文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18597.html

• 随着Ajax的出现，有了前后端分离的开发模式
• 后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过javaScript将数据渲染到页面中
• 这样做的最大的优点就是后端的责任的清晰，后端专注于数据上，前端专注于交互和可视化上
• 并且当移动端（IOS/android）出现后，后端不需要进行任何的处理，依然可以使用之前的API即可
• 目前很多网站都蚕蛹这个模式进行开发

前端渲染

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18597.html

前端路由阶段（spa页面）

单页面富应用阶段

• 其实SPA最主要的特点就是在前后端分离的基础上加上了一层前端路由
• 也就是运用前端来维护一套路由规则
• 整个页面只有一个html页面
  前端路由的核心：

url的hash和HTML的history

方法三：：HTML中的history模式：replaceState
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18597.html

认识vue-router

简介

目前前端三大主流框架，都有着自己的路由实现。现在主要介绍的是：vue-router文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18597.html

• vur-router是vuejs官方的路由插件，他和是深度集成的，适合于构建单页面应用
• vue-router是基于路由和组件的
• 在vue-router的单页面应用中，页面的路径改变就是组件的切换

安装和使用路由

安装

因为之前学过了webpack，我们可以使用工程化的方式进行开发的
所以后续时，我们直接npm来安装路由即可
步骤：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18597.html

• 1 安装 vur-routernpm -router --save
• 2在模块化工程中使用它（因为这是一个插件，我们可以通过()来安装路由）
  • ①导入路由对象，并且盗用(vuerouter)
  • ②创建路由实例，并且传入路由映射配置
  • ③在vue实例中挂载创建的路由实例

使用

步骤：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18597.html

• 创建路由组件
• 配置路由映射：组件和路径映射关系词
• 使用路由：通过：<router link >和<router-view>

<router link >和<router-view>:
<router link >: 该标签是一个vue-router中已经内置的组件，它会被渲染成一个标签
<router-view>：该标签会更具当前的路径，动态渲染出不同的组件，网页的洽谈内容，比如顶部的标题导航，或者底部的一些版权信息等会和 <router-view>处于同一个等级
在路由切换时，切换的是<router-view>挂载的组件，其他内容不会发生改变文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18597.html

< router link >属性补充

具体实现如下：
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18597.html