当前位置：首页 > news >正文

Vue路由的使用及node.js下载安装和环境搭建

news 2025/7/9 16:10:40

一、Vue路由

1.1 简介

( 1 ) 特点

( 2 ) 作用

1.2 实例

( 1 ) 引入

( 2 ) 组件

( 3 ) 关系

( 4 ) 路由

( 5 ) 事件

( 6 ) 锚点

二、nodeJS

2.1 下载

2.2 安装

2.3 环境搭建

新增

添加

测试

配置

运行

一、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

启动执行后，项目开启说明完成;

以上是我启动项目的界面:

Vue路由的使用及node.js下载安装和环境搭建

目录一、Vue路由 1.1 简介 ( 1 ) 特点 ( 2 ) 作用 1.2 实例 ( 1 ) 引入 ( 2 ) 组件 ( 3 ) 关系 ( 4 ) 路由 ( 5 ) 事件 ( 6 ) 锚点二、nodeJS 2.1 下载 2.2 安装 2.3 环境搭建新增添加测试配置运行一、Vue路由 1.1 简介 Vue路由是Vue.…...

编程日记 2023/9/21 13:29:32

【算法训练-二叉树三】【最大深度与直径】求二叉树的最大深度、求二叉树的直径

废话不多说，喊一句号子鼓励自己：程序员永不失业，程序员走向架构！本篇Blog的主题是【求二叉树的直径】，使用【二叉树】这个基本的数据结构来实现，这个高频题的站点是：CodeTop，筛选条件…...

编程日记 2023/9/21 13:28:31

查看linux是centos还是Ubuntu

查看linux是centos还是Ubuntu 命令：cat /etc/os-release...

编程日记 2023/9/21 13:26:29

win10怎么关闭自动更新，这个方法你知道吗？

Windows 10 操作系统自动更新是确保系统安全性和性能的关键功能。然而，有时用户可能希望手动控制更新，因此关闭自动更新可能是一个有用的选项。在本文中，我们将介绍win10怎么关闭自动更新的两种方法，以满足用户不同的需求。方法1…...

编程日记 2023/9/21 13:25:28

「语音芯片」常见的OTP芯片故障分析

OTP语音芯片是指一次性可编程语音芯片,语音只能烧写一次，适合应用在不需要修改语音、语音长度短的场合，从放音的长度上可以分为20秒、40秒、80秒、170秒、340秒。语音芯片的特点是单芯片方案、价格便宜，适合批量生产，即便是小数量…...

编程日记 2023/9/21 13:24:27

孩子写作业买什么样台灯合适？适合孩子读写台灯推荐

现在孩子的普遍都存在视力问题，而导致孩子近视的原因可能跟光线太强或太弱、不用的用眼习惯、长时间的过度用眼等因素有关，根据数据表明目前中国近视患者人数达到6亿多，其中儿童青少年的视力不良率甚至高达八成，所以在孩子的学习道…...

编程日记 2023/9/21 13:22:25

DBAPI插件开发指南

DBAPI插件开发指南插件市场您可以去插件市场下载插件插件的作用 DBAPI的插件分4类，分别是数据转换插件、缓存插件、告警插件、全局数据转化插件缓存插件对执行器结果进行缓存，比如SQL执行器，对查询类SQL，sql查询结果进…...

编程日记 2023/9/21 13:19:22

线程池使用之自定义线程池

目录一：Java内置线程池原理剖析二：ThreadPoolExecutor参数详解三：线程池工作流程总结示意图四：自定义线程池-参数设计分析 1:核心线程数(corePoolSize) 2:任务队列长度(workQueue) 3:最大线程数(maximumPoolSize) 4:最…...

编程日记 2023/9/21 13:18:21

Puppeteer无头浏览器：开启自动化之门，掌握浏览器世界的无限可能

大概还是入门期，我曾用Puppeteer做爬虫工具以此来绕过某网站的防爬机制。近期有需求要做任意链接网页截图，像这种场景非常适合用Puppeteer完成。无头浏览器我已知的还有Selenium。完成截图需求踩的最大的坑不是具体的逻辑代码，而是Docker部…...

编程日记 2023/9/21 13:17:19

Ubuntu 23.10/24.04 LTS 放弃默认使用 snap 版 CUPS 打印堆栈

导读Canonical 的开发者、OpenPrinting 的项目负责人 Till Kamppeter 今年 5 月表示，计划在 Ubuntu 23.10（Mantic Minotaur）上默认使用 Snap 版本的 CUPS 打印堆栈。不过经过数月的测试，官方放弃了这项决定。Ubuntu 23.10&#x…...

编程日记 2023/9/21 13:16:19

Linux CentOS7 history命令

linux查看历史命令可以使用history命令，该命令可以列出所有已键入的命令。这个命令的作用可以让用户或其他有权限人员，进行审计，查看已录入的命令。用户所键入的命令作为应保存的信息将记录在文件中，这个文件就是家目录中的一…...

编程日记 2023/9/21 13:15:17

XC5350A 单节锂电池保护芯片过放2.9V/2.8V/2.4V保护IC

XC5350A产品是一个高集成度的鲤离子/聚合物电池保护解决方案。XC5350A包含先进的功率MOSFET，高精度电压检测电路和延迟电路XC5350A放入一个超小型SOT23-5封装，只有一个外部元件使其成为在电池组有限的空间的理想解决方案。 XC5350A具有包括过充&#xff…...

编程日记 2023/9/21 13:14:16

单片机论文参考：1、基于单片机的电子琴

摘要随着社会的发展进步，音乐逐渐成为我们生活中很重要的一部分，有人曾说喜欢音乐的人不会向恶。我们都会抽空欣赏世界名曲，作为对精神的洗礼。本论文设计一个基于单片机的简易电子琴。电子琴是现代电子科技与音乐结合的产物，是一…...

编程日记 2023/9/21 13:13:15

Opencv源码解析（2）算法

目录一，直方图均衡 1，直方图统计 2，灰度变换 3，直方图均衡二，可分离滤波器 1，可分离滤波器的工厂 2，ocvSepFilter、sepFilter2D 3，Sobel 三，相位相关法 phase…...

编程日记 2023/9/21 13:12:15

让Mac菜单栏变得更加美观整洁——Bartender 5

Bartender 5是一款Mac电脑上的菜单栏图标管理软件，能够帮助您把菜单栏上的图标整理得更加美观、整洁和易于使用。如果您的菜单栏上充斥着许多图标，导致视觉上很不舒适和疲劳，那么Bartender 5就是解决这一问题的最佳选择！ Bartend…...

编程日记 2023/9/21 13:11:13

服务器迁移：无缝过渡指南

🌷🍁 博主猫头虎（🐅🐾）带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…...

编程日记 2023/9/21 13:10:12

安卓开发中ViewBinding的使用

在安卓开发中，ViewBing 的作用就是简化 findViewById() 代码的写法。看看下面的替换： etbinding.text //etfindViewById(R.id.text) 下面就看看怎么用的， 首先，打开app模块的build.gradle，然后添加如下代码&…...

编程日记 2023/9/21 13:09:10

【初阶数据结构】树（tree）的基本概念——C语言

目录一、树（tree） 1.1树的概念及结构 1.2树的相关概念 1.3树的表示 1.4树在实际中的运用（表示文件系统的目录树结构） 二、二叉树的概念及结构 2.1二叉树的概念 2.2现实中真正的二叉树 2.3特殊的二叉树 2.4二叉树的性质…...

编程日记 2023/9/21 13:08:09

二叉树知识点

1.霍夫曼编码这位作者写的很清楚哈夫曼编码详解——图解真能看了秒懂_已知字符集abcdef,若各字符出现的次数_Young_IT的博客-CSDN博客 2.满二叉树与完全二叉树满二叉树是指每层数量是pow(2,n-1)个节点，总节点数是pow(2,n)-1; 而完全二叉树是指最后一层不一定…...

编程日记 2023/9/21 13:06:07

Day69：283. 移动零、11. 盛最多水的容器、42. 接雨水

283. 移动零 leetcode链接：https://leetcode.cn/problems/move-zeroes/ 给定一个数组 nums，编写一个函数将所有 0 移动到数组的末尾，同时保持非零元素的相对顺序。请注意 ，必须在不复制数组的情况下原地对数组进行操作。示例 1:…...

编程日记 2023/9/21 13:05:06

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/6/18 0:49:30

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/7/6 2:27:06

linux 下常用变更-8

1、删除普通用户查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行，YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID： YW3…...

编程新知 2025/7/5 18:42:22

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式：数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本模型并行：将模型分割到不同设备，每个设备处理部分模型计算现代大模型训练通常结合…...

编程新知 2025/6/24 6:21:26

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现（两者等价），用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例： 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/7/5 20:12:33

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人点击群设置下滑到群管理的机器人，点击进入添加机器人选择自定义Webhook服务点击添加设置安全设置，详见说明文档成功后，记录Webhook 2 API文档说明点击设置说明查看自…...

编程新知 2025/7/6 18:11:22

【JVM】Java虚拟机（二）——垃圾回收

目录一、如何判断对象可以回收 （一）引用计数法 （二）可达性分析算法二、垃圾回收算法 （一）标记清除 （二）标记整理 （三）复制 （四&#xff…...

编程新知 2025/7/6 11:30:21

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机配置虚拟机飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2025/7/8 15:20:00

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象： android studio报错： [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决： 不要动CMakeLists.…...

编程新知 2025/7/8 11:40:20

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空但是，要注意以下几点： Django的表单验证与null无关：null参数控制的是数据库层面字段是否可以为NULL，而blank参数控制的是Django表单验证时字…...

编程新知 2025/7/7 3:34:13

一、Vue路由

1.1 简介

( 1 ) 特点

( 2 ) 作用

1.2 实例

( 1 ) 引入

( 2 ) 组件

( 3 ) 关系

( 4 ) 路由

( 5 ) 事件

( 6 ) 锚点

二、nodeJS

2.1 下载

2.2 安装

2.3 环境搭建

新增

添加

测试

配置

运行

相关文章：