vue-路由-基本概念与原理

最新推荐文章于 2022-09-06 17:55:52 发布

gaog2zh

最新推荐文章于 2022-09-06 17:55:52 发布

阅读量551

点赞数

分类专栏： # vue 文章标签： vue 路由

本文链接：https://blog.csdn.net/gaogzhen/article/details/107678099

版权

vue 专栏收录该内容

42 篇文章 10 订阅

订阅专栏

vue-路由-基本概念与原理

文章目录

内容

路由的本质就是对应关系。

在开发中，路由分为：

后端路由
前端路由

1.1、后端路由

概念：根据不同的用户URL请求，返回不同的内容
本质：URL请求地址与服务器资源的对应关系

1.2、SPA（single page application)

后端渲染（存在性能问题）
Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）
SPA（singel page application)单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进后退操作
SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器访问历史记录的变化、但是hash的变化不会触发新的URL请求）
在实现SPA过程中，最核心的技术点就是前端路由

1.3、前端路由

概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系

1.4、实现简易的前端路由

原理：通过监听window的onhashchange，获取最新的hash值，根据hash值切换对应的组件

代码1.4-1：

  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>简易前端路由</title>
  </head>
  <body>
  	<div id="app">
  		<a href="#/zhuye">主页</a>
  		<a href="#/keji">科技</a>
  		<a href="#/caijing">财经</a>
  		<a href="#/yule">娱乐</a>
  		<!-- 组件占位符  -->
  		<component :is="comName"></component>
  	</div>
  	<script src="../../node_modules/vue/dist/vue.js"></script>
  	<script>
  		const zhuye = {
  			template: `<h1>主页信息</h1>`
  		}
  		const keji = {
  			template: `<h1>科技信息</h1>`
  		}
  		const caijing = {
  			template: `<h1>财经信息</h1>`
  		}
  		const yule = {
  			template: `<h1>娱乐信息</h1>`
  		}
  		const vm = new Vue({
  			el: '#app',
  			data: {
  				comName: 'zhuye'
  			},
  			components: {
  				zhuye,
  				keji,
  				caijing,
  				yule
  			}
  		})

  		// 监听window的onhashchange事件，根据获取最新的hash值，切换显示对应的组件
  		window.onhashchange = function () {
  			console.log(location.hash.slice(1));
  			switch (location.hash.slice(1)) {
  				case '/zhuye':
  					vm.comName = 'zhuye'
  					break;
  				case '/keji':
  					vm.comName = 'keji'
  					break
  				case '/caijing':
  					vm.comName = 'caijing'
  				break
  					case '/yule':
  					vm.comName = 'yule'
  					break
  				default:
  					break;
  			}
  		}
  	</script>
  </body>
  </html>

后记：

vue官网地址：https://cn.vuejs.org/

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA

gaog2zh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue-路由-基本概念与原理

vue-路由-基本概念与原理目录文章目录1.1、后端路由1.2、SPA（single page application)1.3、前端路由1.4、实现简易的前端路由***后记*** ：内容路由的本质就是对应关系。在开发中，路由分为：后端路由前端路由1.1、后端路由概念：根据不同的用户URL请求，返回不同的内容本质：URL请求地址与服务器资源的对应关系1.2、SPA（single page application)后端渲染（存在性能问题）Ajax前端渲染（前端渲染提
复制链接

扫一扫