前端路由和后端路由

最新推荐文章于 2024-08-31 09:15:00 发布

听雨婷婷

最新推荐文章于 2024-08-31 09:15:00 发布

阅读量273

点赞数 1

本文链接：https://blog.csdn.net/tayngh/article/details/103110217

版权

什么是路由？
路由是根据不同的 url 地址展示不同的内容或页面；
什么是后端路由？
浏览器在地址栏中切换不同的url时，每次都向后台服务器发出请求，服务器响应请求，在后台拼接html文件传给前端显示, 返回不同的页面, 意味着浏览器会刷新页面，网速慢的话说不定屏幕全白再有新内容。

一般情况后端路由的项目有以下几个特点：
1. 前端的页面资源和后端服务是在一个项目中，发布部署的时候也是在一块
2. 页面请求的url全部要通过后端服务的过滤器进行过滤和处理，即：所有请求会先走后端服务
3. 前端浏览器显示的页面信息是通过后端服务直接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/