Vue路由与nodejs下载安装及环境变量的配置

**1. 单页面应用程序（SPA）：**Vue路由适用于开发单页面应用程序，这种应用程序在加载时只会加载一个HTML页面，通过动态地更新页面内容来实现不同页面之间的切换，提供更流畅的用户体验。

2. 前端路由：Vue路由是前端路由的一种实现方式，它通过改变URL来实现页面的切换，而不需要重新加载整个页面。这样可以减少服务器的负担，提高页面加载速度。

3. 组件化开发：Vue路由与Vue组件紧密结合，每个路由对应一个组件，通过路由来加载和渲染不同的组件。这样可以将页面拆分成多个独立的组件，提高代码的可维护性和复用性。

**4. 导航守卫：**Vue路由提供了导航守卫的功能，可以在路由切换前后执行一些逻辑，例如验证用户权限、处理登录状态等。

应用场景

Vue路由适用于开发各种类型的单页面应用程序，特别是需要多个页面之间切换和导航的应用场景，例如电子商务网站、社交媒体应用、新闻资讯网站等。

2.SPA简介

SPA是什么

SPA（Single Page Application）是一种现代的Web应用程序架构模式，它的核心思想是将整个应用程序加载到一个单独的页面中，通过动态地更新页面的内容来实现用户与应用程序的交互。

传统的Web应用程序通常是多页面的，每次用户与应用程序进行交互时都需要重新加载整个页面。而SPA则通过使用前端框架（如Vue.js、React等）和AJAX技术，将应用程序的逻辑和数据加载到一个页面中，并通过异步请求来更新页面的内容，从而实现了更流畅的用户体验。

SPA的优点

1. 更快的页面加载速度：由于只需要加载一次页面，后续的页面切换只需要更新内容，减少了不必要的网络请求和页面加载时间。

**2. 更好的用户体验：**页面的切换更加流畅，用户不会感到页面的闪烁和加载延迟，提升了用户的满意度。

3. 更高的开发效率：SPA使用前端框架来管理应用程序的状态和路由，使得开发人员可以更好地组织和维护代码，提高了开发效率。

注意事项

**1. 首次加载时间较长：**由于需要加载整个应用程序的代码和资源，首次加载时间可能会比较长。

**2. SEO优化困难：**由于SPA只有一个页面，搜索引擎难以获取到完整的页面内容，对于SEO优化需要额外的处理。

**3. 内存占用较高：**由于整个应用程序都加载到内存中，对于较大的应用程序可能会占用较多的内存。

3.路由实现思路

路由允许我们在应用程序中实现页面之间的导航和跳转，接下来也将详细介绍路由在期间的思路流程。

1.引入路由的js依赖

复制代码

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

2.定义组件

复制代码

var Home=Vue.extend({
				template: '<div>欢迎来到东天帝商城首页</div>' 
			});
			var About=Vue.extend({
				template: '<div>欢迎来到晓天帝扫黑除恶系统</div>'
			});

3.定义组件与路径的对应关系

复制代码

var routes=[{
				component:Home,
				path:'/home'
			},{
				component:About,
				path:'/about'
			}];

4.通过路由关系获取路由对象router

复制代码

var router = new VueRouter({routes});

5.将路由对象挂载到实例中

复制代码

new Vue({
			  el: '#app',
			  router,
			 
			});

6.触发路由事件的按钮

复制代码

<router-link to="/home">东天帝</router-link>
			<router-link to="/about">晓天帝</router-link>

7.定义锚点---路由内容

复制代码

<router-view></router-view>

完整案例

复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		 <!-- 1.引入路由的js依赖 -->
				<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- {{msg}} -->
			<!-- 6.触发路由事件的按钮 -->
			<router-link to="/home">东天帝</router-link>
			<router-link to="/about">晓天帝</router-link>
			<!-- 7.定义锚点---路由内容 -->
			<router-view></router-view>
		</div>
		<script type="text/javascript">
			// 2.定义两个组件
			var Home=Vue.extend({
				template: '<div>欢迎来到东天帝商城首页</div>' 
			});
			var About=Vue.extend({
				template: '<div>欢迎来到晓天帝扫黑除恶系统</div>'
			});
			// 3.定义组件与路径的对应关系
			var routes=[{
				component:Home,
				path:'/home'
			},{
				component:About,
				path:'/about'
			}];
			// 4.通过路由关系获取路由对象router
			var router = new VueRouter({routes});
			
			// 5.将路由对象挂载到实例中
			new Vue({
			  el: '#app',
			  router,
			 
			});
		</script>
	</body>
</html>

二、NodeJS下载安装及环境搭建

1. Node.js是什么

1.Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。 Node.js使用了一个事件驱动、非阻塞式I/O 的模型。

Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言

注1 ：Node.js-->JavaScript运行环境，开发语言是：javascript

J2EE -->Java运行环境，开发语言是java