前端路由和后端路由
程序员文章站
2024-02-14 22:55:16
...
-
什么是路由？
路由是根据不同的 url 地址展示不同的内容或页面； -
什么是后端路由？
浏览器在地址栏中切换不同的url时，每次都向后台服务器发出请求，服务器响应请求，在后台拼接html文件传给前端显示, 返回不同的页面, 意味着浏览器会刷新页面，网速慢的话说不定屏幕全白再有新内容。一般情况后端路由的项目有以下几个特点：
- 前端的页面资源和后端服务是在一个项目中，发布部署的时候也是在一块
- 页面请求的url全部要通过后端服务的过滤器进行过滤和处理，即：所有请求会先走后端服务
- 前端浏览器显示的页面信息是通过后端服务直接response的，页面的内容是后端进行加工和处理的
-
什么是前端路由？
-
定义：在单页面应用，大部分页面结构不变，只改变部分内容的使用
-
优点:
– 用户体验好，和后台网速没有关系，不需要每次都从服务器全部获取，快速展现给用户
– 可以再浏览器中输入指定想要访问的url路径地址。
– 实现了前后端的分离，方便开发。有很多框架都带有路由功能模块。 -
缺点:
– 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
– 单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置 -
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌
-
简单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用前端路由实现组件切换</title>
<!--
作者：1
时间：2019-11-17
描述：先引入vue包后引入vue-router，建议：vue是2.6.10以上，vue-router是3.1.3
-->
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<style>
.v-enter,.v-leave-to{opacity: 0; transform: translateX(150px);}
.v-enter-active,.v-leave-active{transition: all 1s ease;}
</style>
</head>
<body>
<div id="app">
<!--
作者：6
时间：2019-11-17
描述：访问指定的子组件
-->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!--
作者：5
时间：2019-11-17
描述：渲染路由
-->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
</body>
<script>
//2.定义子组件,子组件可以引入外部HTML
var login={
template:"<h1>登录模板</h1>",
}
var register={
template:"<h1>注册模板</h1>",
}
//3：创建router对象，并注册子组件
var router=new VueRouter({
routes:[
{path:'/',redirect:'/login'},//默认显示登录
{path:'/login',component:login},
{path:'/register',component:register},
]
});
var app=new Vue({
el:'#app',
router,//4.在Vue对象中注册
})
</script>
</html>
-
适用场景
1.从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。
2.在某些场合中，用ajax请求，可以让页面无刷新，页面变了但Url没有变化，用户就不能复制到想要的地址，用前端路由做单页面网页就很好的解决了这个问题。但是前端路由使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。
Vue.js 官网 https://cn.vuejs.org/v2/guide/installation.html
Vue Router 官网 https://router.vuejs.org/zh/
上一篇： js 对url 进行解码,编码