Vue中的路由介绍以及Node.js的使用

🏅我是默，一个在CSDN分享笔记的博主。📚📚

🌟在这里，我要推荐给大家我的专栏《Vue》。🎯🎯

🚀无论你是编程小白，还是有一定基础的程序员，这个专栏都能满足你的需求。我会用最简单易懂的语言，带你走进Vue的世界，让你从零开始，一步步成为JAVA大师。🚀🏆

🌈让我们在Vue的世界里畅游吧！🌈

🎁如果感觉还不错的话请记得给我点赞哦！🎁🎁

💖期待你的加入，一起学习，一起进步！💖💖 

一.路由的入门

1.什么是路由？

在计算机领域中，路由（Routing）指的是确定网络上数据包从源地址到目标地址所经过的路径和中间节点的过程。

在 Web 开发中，路由通常指的是根据 URL 地址的不同，将用户请求导航到相应的页面或处理程序的机制。它用于确定应用程序中哪个部分将处理特定的 URL 请求，并决定如何将用户的请求映射到正确的处理逻辑。

在单页应用程序 (SPA) 中，路由还可以用于实现页面之间的切换和导航。通过路由，用户可以在不刷新整个页面的情况下，只更新页面的一部分内容，提供更流畅的用户体验。

Web 路由通常使用 URL 路径和参数来定义不同的路由规则。当用户访问一个特定的 URL 时，路由系统会根据定义的路由规则找到与之匹配的处理程序，并进行相应的操作，例如加载对应的页面、显示对应的数据等。

总结来说，路由是指确定网络数据从源地址到目标地址所经过的路径和中间节点的过程。在 Web 开发中，路由指的是根据 URL 地址的不同，将用户请求导航到相应的页面或处理程序的机制，用于实现页面之间的切换和导航。

2. Vue中的路由是什么？

ue中的路由是用于在单页应用程序 (SPA) 中实现页面之间的切换和导航的机制。Vue Router 是 Vue.js 官方提供的路由管理器，它可以与 Vue.js 无缝集成，用于构建复杂的单页应用。

使用路由的步骤 

  1. 安装 Vue Router：在命令行中运行 npm install vue-router，或者通过 CDN 引入 Vue Router 资源。

  2. 导入 Vue Router：在你的项目代码中，导入 Vue 和 Vue Router。

    import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)

  3. 定义路由组件：创建用于表示不同页面的组件。

    const Home = { template: '<div>这是首页</div>' } const About = { template: '<div>这是关于页</div>' }

  4. 创建路由实例：实例化一个 VueRouter 对象，并定义路由配置。

    const router = new VueRouter({ routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] })

  5. 创建 Vue 实例：将路由实例与 Vue 实例进行绑定。

  6. new Vue({ router, template: ` <div id="app"> <router-link to="/">首页</router-link> <router-link to="/about">关于页</router-link> <router-view></router-view> </div> ` }).$mount('#app')

  7. 渲染路由视图：在 Vue 实例的模板中，使用 <router-link> 标签作为导航链接，使用 <router-view> 标签用于渲染当前路由的组件。

    <router-link> 是一个 Vue 组件，它会根据配置的路由规则生成对应的 <a> 标签，并自动处理 URL 的变化。to 属性指定要导航到的路径。

    <router-view> 是一个占位符组件，用于渲染当前匹配到的路由组件。

3.路由为开发做出了什么贡献

1.页面导航和切换：通过路由，可以轻松地实现页面之间的导航和切换，无需刷新整个页面。这为用户提供了更流畅、无缝的浏览体验，并能够快速加载需要的页面内容。

2.单页应用 (SPA) 支持：路由在单页应用程序中起到关键作用。它允许开发者使用不同的 URL 地址映射到不同的组件或页面，确保用户可以直接访问特定的功能模块，同时保持应用程序的整体性能和响应速度。

3.状态管理：路由器通常与状态管理库（如 Vuex）集成，可以根据当前的路由状态动态更新应用程序的状态。这样，开发人员可以方便地存储和管理页面之间共享的数据，实现更复杂的交互和状态控制。

4.动态路由匹配：路由可以配置动态路由参数和通配符，使开发人员能够根据特定的模式匹配和处理不同的 URL 地址。这种灵活性可以用于构建可扩展、具有动态内容的应用程序，例如展示不同用户的个人资料、显示特定类别的产品等。

5.嵌套路由：路由器允许配置嵌套路由，使开发人员能够构建复杂的页面结构和组织方式。嵌套路由可以在子页面上定义自己的路由规则，从而实现更深层次的页面嵌套和导航。

6.历史记录管理：路由器可以管理应用程序的历史记录，包括前进、后退和浏览历史的导航。这使用户能够方便地返回之前浏览过的页面，提高了用户体验和导航控制。

4.具体实例 

源码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.2/vue-router.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><title>表单的综合案例</title></head><body><div id="app"><!-- 6.触发路由事件按钮 --><router-link to="/center">首页</router-link><router-link to="/about">关于网址</router-link><!--7.定义锚点，展示内容  --><router-view></router-view></div><script type="text/javascript">// 1. 定义组件var center = Vue.extend({template: '<div>网站出现首页内容</div>'});var about = Vue.extend({template: '<div>显示网站介绍</div>'});// 2. 定义路由对象var routes = [{ component: center, path: '/center' },{ component: about, path: '/about' }];// 3. 创建路由实例var router = new VueRouter({routes: routes});// 4. 创建Vue实例new Vue({el: "#app",router: router,data() {return {msg: '刘兵要上百星王者'}}})</script></body>
</html>

思路实现

1.导入依赖  

2 定义组件
3. 定义路由对象
4. 创建路由实例
5. 创建Vue实例

 6.触发路由事件按钮 
 7.定义锚点，展示内容  -->

展示效果

 

二.Node.js的入门

1.什么是Node.js？

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境。它使用事件驱动、非阻塞I/O模型，使得JavaScript可以在服务器端运行。Node.js具有高效、轻量和可扩展的特性，广泛应用于构建网络应用、API服务、实时应用程序等。

2.使用Node.js的步骤

使用Node.js的步骤如下：

步骤1：

安装Node.js 首先，需要从Node.js官方网站下载并安装Node.js。根据操作系统的不同选择对应的安装包，然后按照安装向导进行安装。

步骤2：

创建项目目录 在合适的位置创建一个项目目录，用于存放项目的代码和相关文件。

步骤3：

初始化项目 打开命令行工具，进入到项目目录，执行以下命令初始化一个新的Node.js项目：

npm init

这将会引导你设置一些项目的基本信息，并在最后生成一个package.json文件，用于管理项目的依赖项和配置信息。

步骤4：

安装依赖项 通过npm（Node.js的包管理工具）来安装项目所需的依赖项。在命令行中执行以下命令安装指定的依赖项（以express为例）：

npm install express

这将会下载并安装express模块，并将其添加到项目的package.json文件中。

步骤5

：编写代码 在项目目录中创建一个JavaScript文件，编写Node.js应用程序的代码。可以使用任何文本编辑器或集成开发环境（IDE）来编辑代码。

步骤6：

运行应用程序 通过命令行切换到项目目录，并执行以下命令来运行Node.js应用程序：

node app.js

其中app.js是你编写的Node.js应用程序的入口文件。

步骤7：

测试应用程序 打开Web浏览器，在地址栏中输入指定的URL

以上是使用Node.js的一般步骤，具体步骤可能因项目需求和个人偏好而有所不同。

3.具体操作

解压Node.js的压缩包

 新建目录

    node_global：npm全局安装位置
     node_cache：npm缓存路径

配置环境变量

 

检查是否配置成功

 

配置镜像 

  打开cmd，分开执行如下命令：
      npm config set cache "D:\tool\Node\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_cache"
      npm config set prefix "D:\tool\Node\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_global"
      
      注1：将步骤一创建的node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来
      注2：如果执行命令卡死，可以删除C:\Users\用户名\.npmrc 后重新执行。（用户名：为当前电脑的用户名）
      注3："D:\initPath\node-v10.15.3-win-x64\node_global"，双引号不能少

  3.5 修改npm镜像提高下载速度(可以使用 cnpm 或 直接设置 --registry ，推荐设置 --registry)
    3.5.1 --registry
          ## 设置淘宝源
          npm config set registry https://registry.npm.taobao.org/
          ## 查看源，可以看到设置过的所有的源
          npm config get registry

 

 

 查看npm全局路径设置情况

  ## 此步骤随便全局安装一个模块就可以测评
          npm install webpack -g
          ## 以上命令执行完毕后，会生成如下文件
          %node_home%\node_global\node_modules\webpack
          注意：下载过程中出现warn不用管，出现Error，删掉下载的破碎文件重新下载 


     

启动项目

首先输入 npm i 在解压地项目根路径小编以自己的展示

最后在输入   npm run dev 就可以启动项目 

项目展示

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/140293.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据结构之顺序表

数据结构之顺序表

前言 顺序表采用模块化编程思路&#xff0c;顺序表的实现使用3个模块&#xff0c;test.c—测试模块 Seqlist.c—接口函数的实现模块 seqlist.h—接口函数声明 顺序表的基本概念 顺序表是在计算机内存中通常以数组形式存储的线性表&#xff0c;线性表是n个具有相同特性的数据元…
阅读更多...
R语言绘制PCA双标图、碎石图、变量载荷图和变量贡献图

R语言绘制PCA双标图、碎石图、变量载荷图和变量贡献图

1、原论文数据双标图 代码&#xff1a; setwd("D:/Desktop/0000/R") #更改路径#导入数据 df <- read.table("Input data.csv", header T, sep ",")# ----------------------------------- #所需的包: packages <- c("ggplot2&quo…
阅读更多...
电视访问群晖共享文件失败的设置方式，降低协议版本

电视访问群晖共享文件失败的设置方式，降低协议版本

控制面板-文件服务-SMB-高级设置&#xff0c;常规及其他里面配置即可。
阅读更多...
【红外图像增强】基于引力和侧向抑制网络的红外图像增强模型（Matlab代码实现）

【红外图像增强】基于引力和侧向抑制网络的红外图像增强模型（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
计算机视觉: 三维物体生成

计算机视觉: 三维物体生成

三维物体生成与编辑 论文地址: Controllable Mesh Generation Through Sparse Latent Point Diffusion Models 背景 数据是目前数字化和AI领域最宝贵的财富之一&#xff0c;但是对于目前的开发者来说&#xff0c;收集数据都意味着极大的成本。所以建立一个高效的生成模型能极…
阅读更多...
Linux学习之Redis使用

Linux学习之Redis使用

搭建Redis服务器 在主机redis64运行redis服务 #安装redis服务 [rootredis64 ~]# yum install -y redis # 启动redis服务并开机启动 [rootredis64 ~]# systemctl enable redis --now # 查看redis端口 [rootredis64 ~]# ss -tnlp | grep redis-server LISTEN 0 128 …
阅读更多...
PythonWeb服务器（HTTP协议）

PythonWeb服务器（HTTP协议）

一、HTTP协议与实现原理 HTTP&#xff08;Hypertext Transfer Protocol&#xff0c;超文本传输协议&#xff09;是一种用于在网络上传输超文本数据的协议。它是Web应用程序通信的基础&#xff0c;通过客户端和服务器之间的请求和响应来传输数据。在HTTP协议中连接客户与服务器的…
阅读更多...
网工基础知识——以太网

网工基础知识——以太网

1972年Bob Metcalfe“以太网之父”被Xerox雇佣为网络专家&#xff0c;Bob Metcalfe 来到Xerox公司的Palo Alto研究中心&#xff08;PARC&#xff09;的第一个任务是把Palo Alto的计算机连接到ARPANET&#xff08;Internet的前身&#xff09;上。1972年底Bob Metcalfe以ALOHA系统…
阅读更多...
Day 02 python学习笔记

Day 02 python学习笔记

python运算符 算术运算符 混合运算的优先级&#xff1a; () 高于 ** * / // % 高于 - 赋值运算符 - * / ** a 1 > a 3 > a a 3 其余同理 注意&#xff1a; python没有自增自减 &#xff08;a a a-- --a&#xff09;…
阅读更多...
力扣刷题-链表-设计链表

力扣刷题-链表-设计链表

题意&#xff1a; 在链表类中实现这些功能&#xff1a; get(index)&#xff1a;获取链表中第 index 个节点的值。如果索引无效&#xff0c;则返回-1。 addAtHead(val)&#xff1a;在链表的第一个元素之前添加一个值为 val 的节点。插入后&#xff0c;新节点将成为链表的第一个节…
阅读更多...
华为OD机考算法题：分积木

华为OD机考算法题：分积木

目录 题目部分 解读与分析 代码实现 题目部分 题目分积木难度难题目说明Solo和koko是两兄弟&#xff0c;妈妈给了他们一大堆积木&#xff0c;每块积木上都有自己的重量。现在他们想要将这些积木分成两堆。哥哥Solo负责分配&#xff0c;弟弟koko要求两个人获得的积木总重量“…
阅读更多...
ImportError: Java package ‘edu‘ not found, requested by alias ‘edu‘

ImportError: Java package ‘edu‘ not found, requested by alias ‘edu‘

参考issue&#xff1a; https://github.com/ncbi-nlp/NegBio/issues/44 我目前的解决办法 pip uninstall jpype1 -y可以成功运行。
阅读更多...
Ubuntu修改静态IP、网关和DNS的方法总结

Ubuntu修改静态IP、网关和DNS的方法总结

Ubuntu修改静态IP、网关和DNS的方法总结 ubuntu系统&#xff08;其他debian的衍生版本好像也可以&#xff09;修改静态IP有以下几种方法。&#xff08;搜索总结&#xff0c;可能也不太对&#xff09; /etc/netplan (use) Ubuntu 18.04开始可以使用netplan配置网络&#xff0…
阅读更多...
二十五、MySQL事务的四大特性和常见的并发事务问题

二十五、MySQL事务的四大特性和常见的并发事务问题

1、事务的四大特性 2、常见的并发事务问题 &#xff08;1&#xff09;并发事务问题分类&#xff1a; &#xff08;2&#xff09;脏读&#xff1a; 一个事务正在对一条记录做修改&#xff0c;在这个事务完成并提交前&#xff0c;这条记录的数据就处于不一致的状态&#xff1b;…
阅读更多...
HTTP代理反爬虫技术详解

HTTP代理反爬虫技术详解

HTTP代理是一种网络技术&#xff0c;它可以将客户端的请求转发到目标服务器&#xff0c;并将服务器的响应返回给客户端。在网络安全领域中&#xff0c;HTTP代理经常被用来反爬虫&#xff0c;以保护网站的正常运营。 HTTP代理反爬虫的原理是通过限制访问者的IP地址、访问频率、U…
阅读更多...
【Spark】win10配置IDEA、saprk、hadoop和scala

【Spark】win10配置IDEA、saprk、hadoop和scala

终于&#xff0c;要对并行计算下手了哈哈哈。 一直讲大数据大数据&#xff0c;我单次数据处理量大概在1t上下&#xff0c;是过亿级的轨迹数据。 用python调用multiprogress编写的代码&#xff0c;用多线程也要一个多月跑完。 我对这个效率不太满意&#xff0c;希望能快一点再快…
阅读更多...
python实验2

python实验2

1、实验题目&#xff1a;个人用户信息注册 模拟用户个人信息注册&#xff0c;需要输入用户个人信息 姓名、性别、年龄、血型、身高、电话 信息&#xff0c;并输出显示。 源代码&#xff1a; print(用户个人信息注册) name input("请输入您的姓名&#xff1a;") sex…
阅读更多...
基于微信小程序四六级助手系统设计与实现(源码+lw+部署文档+讲解等)

基于微信小程序四六级助手系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言用户微信小程序端的主要功能有&#xff1a;管理员的主要功能有&#xff1a;具体实现截图为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考论文参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W…
阅读更多...
论文阅读_大语言模型_Llama2

论文阅读_大语言模型_Llama2

英文名称: Llama 2: Open Foundation and Fine-Tuned Chat Models 中文名称: Llama 2&#xff1a;开源的基础模型和微调的聊天模型 文章: http://arxiv.org/abs/2307.09288 代码: https://github.com/facebookresearch/llama 作者: Hugo Touvron 日期: 2023-07-19 引用次数: 11…
阅读更多...
Linux下的系统编程——线程同步（十三）

Linux下的系统编程——线程同步（十三）

前言&#xff1a; 在多线程编程中&#xff0c;如果多个线程同时访问和修改共享资源&#xff0c;可能会产生竞争条件和数据不一致的问题。同步机制用于协调线程之间的访问和操作&#xff0c;确保数据的正确性和一致性。为了避免多个线程同时访问和操作共享资源导致的问题&#…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发