前端路由和后端路由

前端路由和后端路由的区别

1.映射关系不同。前端路由是一个路径映射一个组件；后端路由是一个路径映射一个处理本次请求的响应函数。
2.前端路由不需要走网络，而后端路由需要走网络。
3.前端路由切换页面不会使得网页刷新，后端路由切换页面会导致网页刷新。
4.前端路由采用的是客户端渲染，后端路由是服务端渲染。

下面分别看看前端路由和后端路由，你会对这个区别有一个更好的理解。

前端路由

下面来看vue的路由配置

const routes = [
  {
     path:'/',
     redirect:'/login'
  },
  {
    path: '/login',
    name: 'login',
    component: () => import( '../views/login')
  },
 
]

可以很明显的看到，每个路径映射的是一个组件。
我们可以在跳转路由时，打开network看看，很明显的可以看到，路由跳转时是不走网络的，因为单页面应用是在初始时一次性把资源全都请求完成。当然使用路由懒加载的情况除外，使用路由懒加载时，跳转路由时会走dev的内置服务器。
每次跳转之后，我们都可以右键查看页面源代码，可以只有一些脚本的引入，因此是客户端渲染。

后端路由

下面来看express服务器配置的路由。如果对express没有了解的小伙伴，可以这样理解，这就是api接口。

router.get('/detail',(req,res)=>{
    const {id}=req.query
    res.send({status:1,data:list[id-1]})     // 对本次请求响应一段数据
})

router.post("/add",(req,res)=>{
   list.push(req.body)
   res.send({status:1,data:list})          // 对本次请求响应一段数据
})

router.get('/pageA',(req,res)=>{   
     require('fs').readFile('./views/a.html',(err,data)=>{
         res.end(data)             // 对本次请求响应一个页面
     })
})

router.get('/pageB',(req,res)=>{   
     require('fs').readFile('./views/b.html',(err,data)=>{
         res.end(data)             // 对本次请求响应一个页面
     })
})

可以很明显的看到，每个路径映射的是一个处理请求的响应函数。
我们每次发送请求时，都是走的这个后端路由。
以前的项目都是多页面应用的，页面之间的跳转都是通过超链接、提交表单、location等完成的，而这种形式的跳转会引起页面的刷新。

<a href='http://localhost:5000/pageA'>前往页面a</a>
<a href='http://localhost:5000/pageB'>前往页面b</a>

服务器响应的页面是一个完整的dom树，浏览器得到dom树直接渲染就行了，此时查看页面源代码时，可以看到当前网页完整的dom结构。