00.什么是路由？
路由是一个网络工程里面的术语。
路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科
01.后端渲染和后端路由
1.后端渲染：以前网页开发都是通过JSP/PHP等进行开发的。JSP即java serve page，用Java写出一个网页，然后把它传到浏览器，让浏览器直接展示这个网页。
2.后端渲染流程：
a、现在有一个浏览器想请求网页，浏览器可能从这个网站中请求很多个网页。
b、浏览器将请求的页面的URL发到服务器里面，服务器解析请求的网页。
c、服务器在后台通过JSP直接将网页写好，网页中包含HTML+CSS+JAVA。Java代码的作用是从数据库中读取数据，并且将它动态的放在页面中。
d、在服务器中通过Java已经完全将所有的东西渲染好了，服务器端的东西已经是最终的网页了，然后直接将最终的网页传给浏览器，传给浏览器的只有HTML和css代码。
e、这就叫做后端渲染，也叫服务端渲染。传到浏览器的就是已经渲染好的页面。
3.后端路由：浏览器可能从网站中请求很多个页面，每一个请求的URL和页面之间形成一种映射关系；后端处理URL和页面之间映射关系的路由称作后端路
由，可以理解为路由表。
4.例图：
02.前后端分离阶段
1.前后端分离简介：
随着Ajax的出现，有了前后端分离的开发模式，后端只提供API来返回数据，前端通过Ajax获取数据，并且通过JavaScript将数据渲染到页面上。前后端分离的最
大优点是：前后端责任清晰，后端专注与数据，前端专注于交互和可视化。
2.例图：
03.前端路由与单页面富应用阶段
1.单页面富应用简介：简称SPA，SPA最主要的特点就是在前后端分离的基础上加了一层前端路由。
2.流程详解：一般情况下，整个网站只有一个html页面，在前后端分离阶段，静态资源服务器中放了好几套html+css+js，对应各个页面，但是在SPA里面，只
有一个html+css+js。当你输入网站，它将全部资源都加载到浏览器中。比如你想进入你页面的首页，通过首页的url从浏览器获取的全部资源中抽取出需要的组件。
3.前端路由：url和组件之间的一种映射关系。前端路由的核心：改变URL,但页面不进行整体的刷新。
4.例图：
04.安装vue-router
1.执行：npm install vue-router --save
2.创建步骤
第一步：导入路由对象，并且调用 Vue.use(VueRouter)
第二步：创建路由实例，并且传入路由映射配置
第三步：在Vue实例中挂载创建的路由实例
3.详细步骤：
a、创建router>index.js文件，导入路由对象，并调用Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'//导入vue-router
b、创建组件和路由实例，在router>index.js中配置路由映射
const Home =()=>import ('../components/home.vue')//导入组件
const About =()=>import ('../components/about.vue')
const User =()=>import ('../components/user.vue')
// 1.注册router插件
Vue.use(VueRouter)
// 2.定义路由
const routes=[
{
path:'/home',
component:Home
}
]
// 3.创建实例
const router =new VueRouter({
routes,
mode:'history'
})
// 4.导出router实例
export default router
c、在main.js中挂载创建的路由实例
import router from './router'
new Vue({
render: h => h(App),
router,
}).$mount('#app')
d、在APP.vue中使用路由
<router-link to="/home" tag="button">首页</router-link> <router-view></router-view>
e、效果：
