本文介绍了Vue.js中的路由功能，包括声明式路由、特点和作用，以及如何在实际项目中通过实例演示如何引入、组件定义、路由配置和事件处理。同时概述了nodeJS的下载、安装、环境搭建过程，重点强调了其事件驱动模型和npm工具的使用。
目录
一、Vue路由
1.1 简介
Vue路由是Vue.js框架中用于管理页面导航的插件。它允许开发者通过定义路由规则，将不同的组件映射到不同的URL上，实现页面之间的切换和导航。
Vue路由的核心是路由器（Router），它负责监听URL的变化，并根据配置的路由规则来匹配相应的组件进行渲染。在Vue中，我们可以通过Vue Router插件来创建和配置路由器。
( 1 ) 特点
-
声明式路由：Vue路由使用声明式的方式来配置路由规则，开发者只需要在配置文件中定义好路由规则，就可以实现页面之间的切换和导航。
-
嵌套路由：Vue路由支持嵌套路由，可以将多个组件组合成一个整体，并通过父子关系来管理路由。
-
动态路由：Vue路由支持动态路由，可以根据不同的参数来动态生成路由规则，实现更灵活的页面导航。
-
路由懒加载：Vue路由支持路由懒加载，可以将页面组件按需加载，提高页面加载速度和用户体验。
-
导航守卫：Vue路由提供了导航守卫的功能，可以在路由切换前后执行一些额外的逻辑，例如权限验证、页面切换动画等。
总的来说，Vue路由提供了一套完善的路由系统，可以帮助开发者更好地管理页面导航，提供良好的用户体验，并支持嵌套路由、动态路由、路由懒加载、导航守卫等功能，使得开发者可以更灵活地控制页面的展示和交互。
( 2 ) 作用
Vue路由有以下几个主要的作用：
- 1. 实现页面之间的切换和导航：Vue路由可以根据URL的变化，动态地加载和渲染不同的组件，实现页面之间的切换和导航。
- 2. 提供良好的用户体验：通过使用Vue路由，可以实现单页应用（SPA）的效果，页面切换时不需要重新加载整个页面，只需要更新组件部分，提高了用户的交互体验。
- 3. 管理页面状态：Vue路由可以根据URL的变化，动态地管理页面的状态。例如，在URL中添加参数，可以实现页面的筛选、排序等功能。
- 4. 支持嵌套路由：Vue路由支持嵌套路由，可以将多个组件组合成一个整体，并通过父子关系来管理路由。这样可以更好地组织和管理页面结构。
- 5. 支持动态路由和路由参数：Vue路由支持动态路由，可以根据不同的参数来动态生成路由规则，实现更灵活的页面导航。同时，也可以通过路由参数传递数据，实现组件之间的通信。
- 6. 提供导航守卫：Vue路由提供了导航守卫的功能，可以在路由切换前后执行一些额外的逻辑，例如权限验证、页面切换动画等。
总的来说，Vue路由可以帮助开发者更好地管理页面导航，提供良好的用户体验，并且支持动态路由和导航守卫等功能，使得开发者可以更灵活地控制页面的展示和交互。
1.2 实例
( 1 ) 引入
创建 HTML 文件，在该文件中进行引入js依赖
<!-- 1.引入vue的js依赖 -->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<!-- 1.引入路由的js依赖 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>( 2 ) 组件
在 script 标签中定义组件
// 2.定义组件
const Home = Vue.extend({
template: "<div><p>言情小说网</p><div>本网站首页内容</div></div>"
});
const Abort = Vue.extend({
template: "<div><p>永远不掉落女人的陷阱</p><div>本站意义：做西格玛男人</div></div>"
});( 3 ) 关系
在 script 标签中定义组件与路径的对应关系
//3.定义组件与路径的对应关系
let routes = [{
path: '/Home',
component: Home
},{
path: '/Abort',
component: Abort
}];( 4 ) 路由
在 script 标签中定义路由
// 4.定义路由
const router = new VueRouter({routes});
new Vue({
el: '#app',
router
})( 5 ) 事件
在Vue边界中定义触发路由事件的按钮
<!-- 5.触发路由事件的按钮 -->
<router-link to="/Home">首页</router-link>
<router-link to="/Abort">变强</router-link>( 6 ) 锚点
在Vue边界中定义锚点(路由内容)
<!-- 6.定义锚点(路由内容) -->
<router-view></router-view>整合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 1.引入vue的js依赖 -->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<!-- 1.引入路由的js依赖 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
<title>路由</title>
</head>
<body>
<div id="app">
<!-- 5.触发路由事件的按钮 -->
<router-link to="/Home">首页</router-link>
<router-link to="/Abort">变强</router-link>
<!-- 6.定义锚点(路由内容) -->
<router-view></router-view>
</div>
<script type="text/javascript">
// 2.定义组件
const Home = Vue.extend({
template: "<div><p>言情小说网</p><div>本网站首页内容</div></div>"
});
const Abort = Vue.extend({
template: "<div><p>永远不掉落女人的陷阱</p><div>本站意义：做西格玛男人</div></div>"
});
//3.定义组件与路径的对应关系
let routes = [{
path: '/Home',
component: Home
},{
path: '/Abort',
component: Abort
}];
// 4.定义路由
const router = new VueRouter({routes});
new Vue({
el: '#app',
router
})
</script>
</body>
</html>
执行效果
二、nodeJS
Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，用于构建高性能、可扩展的网络应用程序。它允许开发者使用JavaScript语言来编写服务器端的应用程序，并提供了丰富的库和模块，方便开发者进行网络通信、文件操作、数据库访问等操作。
Node.js采用事件驱动、非阻塞I/O模型，使得它能够处理大量并发连接，具有出色的性能表现。它还拥有一个强大的包管理器npm，可以方便地安装、管理和共享代码库。
2.1 下载
下载 nodeJS 资源包 : 下载 | Node.js
注1：Node有两个版本线: LTS是长期维护的稳定版本Current是新特性版本
2.2 安装
将文件解压到指定位置，并在解压后的目录下建立node_global和node_cache这两个目录
node_global：npm全局安装位置
node_cache：npm缓存路径
如图 :
2.3 环境搭建
新增
打开设置 -> 系统 -> 系统信息 -> 高级系统设置 -> 环境变量 -> 在系统变量中点击新建
新增一个环境变量
变量名 : NODE_HOME
变量值 :
下载后解压的指定目录 如( D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64 )
操作如图 :
添加
在系统变量中找到名为 : PATH 变量名的变量选中后，添加以下两个环境变量
需要添加的变量值 :
%NODE_HOME%
%NODE_HOME%\node_global
注 : 根据自己的电脑看是否在变量值后面增加分号来间隔变量值。
如 :
%NODE_HOME%;
%NODE_HOME%\node_global;
操作如图 :
测试
测试安装是否成功及环境变量是否配置完成
Win+R，输入cmd，打开cmd窗口，输出如下命令配置环境变量的查看
echo %node_home%
echo %path%
操作如图 : 
Win+R，输入cmd，打开cmd窗口，输出如下命令测试安装是否成功
node -v
npm -v
操作如图 :
配置
配置npm全局模块路径和cache默认安装位置
Win+R，输入cmd，打开cmd窗口，分开执行如下命令：
npm config set cache "D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_cache"
npm config set prefix "D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_global"
注 ：
以上的路径是下载node的本地路径，再进入到增加新建的两个文件目录里面
其中的双引号不能少
如果执行命令卡死，可以删除C:\Users\用户名\.npmrc 后重新执行。（用户名：为当前电脑的用户名）
( node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来 )
操作如图 :
设置淘宝源 ：
修改npm镜像提高下载速度(可以使用 cnpm 或 直接设置 --registry ，推荐设置 --registry)
Win+R，输入cmd，打开cmd窗口，输入指令:
npm config set registry https://registry.npm.taobao.org/
注 : 可以根据一下命令查看所有你设置过的源
npm config get registry
设置如图 :
运行
测试是否可以使用并运行启动Node.js项目
随便全局安装一个模块就可以测评
Win+R，输入cmd，打开cmd窗口，输入指令:
npm install webpack -g
命令执行完毕后，会在node_global路径下面生成（node_modules\webpack）文件
如果在自己的本地路径中，进行项目测试。
随便在自己的电脑上找一个项目，看是否可以进行添加Node.js依赖
在项目的跟目录中打开cmd窗口
执行如图 :
依赖添加后，启动项目。
继续执行以下命令启动项目:
npm run dev
启动执行后，项目开启说明完成;
以上是我启动项目的界面:
877
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
