vue2 路由入门

一、单页应用程序介绍

1.概念

单页应用程序:SPA【Single Page Application】是指所有的功能都在一个html页面上实现

2.具体示例

单页应用网站: 网易云音乐 https://music.163.com/

多页应用网站:京东 https://jd.com/

3.单页应用 VS 多页面应用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mIDp639t-1693121642334)(assets/1682441912977.png)]

  • 单页应用类网站:系统类网站 / 内部网站 / 文档类网站 / 移动端站点

  • 多页应用类网站:公司官网 / 电商类网站

二、路由介绍

1.思考

单页面应用程序,之所以开发效率高,性能好,用户体验好,最大的原因就是:页面按需更新

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SbSVfohw-1693121642335)(assets/1682442699775.png)]

  • 比如当点击【发现音乐】和【关注】时,只是更新下面部分内容,对于头部是不更新的

  • 要按需更新,首先就需要明确:访问路径组件的对应关系!

  • 访问路径 和 组件的对应关系如何确定呢? 路由

2.路由的介绍

生活中的路由:设备和ip的映射关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Xn1HJnP-1693121642336)(assets/1682442945057.png)]

Vue中的路由:路径和组件映射关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tCxfq0MX-1693121642336)(assets/1682443040372.png)]

三、路由的基本使用

1.目标

认识插件 VueRouter,掌握 VueRouter 的基本使用步骤

2.作用

修改地址栏路径时,切换显示匹配的组件

3.说明

Vue 官方的一个路由插件,是一个第三方包

4.官网

https://v3.router.vuejs.org/zh/

5.VueRouter的使用(5+2)

固定5个固定的步骤(不用死背,熟能生巧)

  1. 下载 VueRouter 模块到当前工程,版本3.6.5

    yarn add vue-router@3.6.5
    
  2. main.js中引入VueRouter

    import VueRouter from 'vue-router'
    
  3. 安装注册

    Vue.use(VueRouter)
    
  4. 创建路由对象

    const router = new VueRouter()
    
  5. 注入,将路由对象注入到new Vue实例中,建立关联

    new Vue({render: h => h(App),router:router
    }).$mount('#app')

当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lDyFAXbe-1693121642337)(assets/1682479207453.png)]

6.代码示例

main.js

// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// yarn add vue-router@3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中,建立关联import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化const router = new VueRouter()new Vue({render: h => h(App),router
}).$mount('#app')

7.两个核心步骤

  1. 创建需要的组件 (views目录),配置路由规则

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8oETTbbs-1693121642338)(assets/1682479639666.png)]

  2. 配置导航,配置路由出口(路径匹配的组件显示的位置)

App.vue

<div class="footer_wrap"><a href="#/find">发现音乐</a><a href="#/my">我的音乐</a><a href="#/friend">朋友</a>
</div>
<div class="top"><router-view></router-view>
</div>

四、组件的存放目录问题

注意: .vue文件 本质无区别

1.组件分类

.vue文件分为2类,都是 .vue文件(本质无区别)

  • 页面组件 (配置路由规则时使用的组件)
  • 复用组件(多个组件中都使用到的组件)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D6s0yWju-1693121642339)(assets/1682445397959.png)]

2.存放目录

分类开来的目的就是为了 更易维护

  1. src/views文件夹

    页面组件 - 页面展示 - 配合路由用

  2. src/components文件夹

    复用组件 - 展示数据 - 常用于复用

五、路由的封装抽离

问题:所有的路由配置都在main.js中合适吗?
目标:将路由模块抽离出来。 好处:拆分模块,利于维护

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cmr39CB2-1693121642340)(assets/1682481410304.png)]

路径简写:

脚手架环境下 @指代src目录,可以用于快速引入组件

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

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

相关文章

PostgreSQL命令行工具psql常用命令

1. 概述 通常情况下操作数据库使用图形化客户端工具&#xff0c;在实际工作中&#xff0c;生产环境是不允许直接连接数据库主机&#xff0c;只能在跳板机上登录到Linux服务器才能连接数据库服务器&#xff0c;此时就需要使用到命令行工具。psql是PostgreSQL中的一个命令行交互…

38.HiddenHttpMethodFilter

HiddenHttpMethodFilter 由于浏览器只支持发送get和post方式的请求&#xff0c;SpringMVC 提供了 HiddenHttpMethodFilter 帮助我们将 POST 请求转换为 DELETE 或 PUT 请求 HiddenHttpMethodFilter 处理put和delete请求的条件&#xff1a; 当前请求的请求方式必须为&#xff1…

资料与参考

资料&#xff1a; 本书&#xff08;《Python神经网络编程》&#xff09;的资料是使用Jupyter notebooks写的&#xff0c;本人并不擅长使用Jupyter&#xff0c;所以用传统py重写了一遍&#xff0c;并附加了新功能&#xff08;即多数字识别&#xff09;&#xff0c;现将Jupyter版…

一百六十四、Kettle——Linux上脚本运行kettle的转换任务(Linux本地、Linux资源库)

一、目的 在kettle的转换任务以及共享资源库、Carte服务创建好后&#xff0c;需要对kettle的转换任务用海豚调度器进行调度&#xff0c;调度的前提的写好脚本。所以&#xff0c;这篇博客首先介绍在Linux上脚本运行kettle的转换任务 二、前提准备 &#xff08;一&#xff09;…

【PHP】echo 输出数组报Array to string conversion解决办法

代码&#xff1a; <?PHP echo "Hello World!";$demoName array("kexuexiong","xiong");echo "<pre>";var_dump($demoName);echo $demoName; print_r($demoName);echo "</pre>"; ?>输出结果&#xff1…

解释 RESTful API,以及如何使用它构建 web 应用程序

RESTful API&#xff08;Representational State Transfer Application Programming Interface&#xff09;是一种通过 HTTP 协议进行通信的 Web API&#xff0c;它可以用于构建 Web 应用程序、移动应用程序和其他客户端应用程序。RESTful API 是一种基于 REST 架构风格的 API&…

土豆叶病害识别(图像连续识别和视频识别)

效果视频&#xff1a;土豆叶病害识别&#xff08;Python代码&#xff0c;pyTorch框架&#xff0c;视频识别&#xff09;_哔哩哔哩_bilibili 代码运行要求&#xff1a;Torch库>1.13.1&#xff0c;其它库无版本要求 1..土豆叶数据集主要包好三种类别&#xff08;Early_Blight…

自然语言处理(二):近似训练

近似训练 近似训练&#xff08;Approximate Training&#xff09;是指在机器学习中使用近似的方法来训练模型&#xff0c;以降低计算复杂度或提高训练效率。这种方法通常用于处理大规模数据集或复杂模型&#xff0c;其中精确的训练算法可能过于耗时或计算资源不足。 近似训练…

day14 二叉树01 二叉树的遍历

目录 二叉树的前序遍历二叉树的中序遍历二叉树的后序遍历 二叉树的前序遍历 二叉树遍历可以使用迭代和递归实现&#xff0c;代码如下&#xff1a; 递归法&#xff1a; vector<int> ret; void _preorderTraversal(TreeNode* root) {if (root nullptr) return;ret.pus…

机器学习理论笔记(二):数据集划分以及模型选择

文章目录 1 前言2 经验误差与过拟合3 训练集与测试集的划分方法3.1 留出法&#xff08;Hold-out&#xff09;3.2 交叉验证法&#xff08;Cross Validation&#xff09;3.3 自助法&#xff08;Bootstrap&#xff09; 4 调参与最终模型5 结语 1 前言 欢迎来到蓝色是天的机器学习…

【springboot】Spring Cache缓存:

文章目录 一、导入Maven依赖&#xff1a;二、实现思路&#xff1a;三、代码开发&#xff1a; 一、导入Maven依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-cache</artifactId><…

《C和指针》笔记8: 枚举类型

枚举 (enumerated)类型就是指它的值为符号常量而不是字面值的类型&#xff0c;它们以下面这种形式声明&#xff1a; enum Jar_Type { CUP, PINT, QUART, HALF_GALLON, GALLON };这条语句声明了一个类型&#xff0c;称为Jar_Type。这种类型的变量按下列方式声明&#xff1a; e…

go语言调用python脚本

文章目录 代码gopython 在 go语言中调用 python 程序&#xff0c;你可能会用到 代码 亲测 go 测试 go 文件 func TestR(t *testing.T) {// 设置要执行的Python脚本和参数scriptPath : "../nansen.py"arg1 : "nansen"// 执行Python脚本cmd : exec.Comm…

lnmp架构-mysql

1.MySQL数据库编译 make完之后是这样的 mysql 初始化 所有这种默认不在系统环境中的路径里 就这样加 这样就可以直接调用 不用输入路径调用 2.初始化 重置密码 3.mysql主从复制 配置master 配置slave 当master 端中还没有插入数据时 在server2 上配slave 此时master 还没进…

算法备案与合规性:企业需要知道什么

随着科技的快速发展&#xff0c;算法已成为许多行业的核心驱动力。然而&#xff0c;随着其影响力日益扩大&#xff0c;算法备案与合规性的问题也越来越受到关注。企业需要了解什么&#xff0c;以便在法律框架内安全、有效地运用算法&#xff1f;这篇软文将为您解答。算法备案找…

2.文章复现《热电联产系统在区域综合能源系统中的定容选址研究》(附matlab程序)

0.代码链接 1.简述 光热发电是大规模利用太阳能的新兴方式&#xff0c;其储热系 统能够调节光热电站的出力特性&#xff0c;进而缓解光热电站并网带来的火电机组调峰问题。合理配置光热电站储热容量&#xff0c;能够 有效降低火电机组调峰成本。该文提出一种光热电站储热容 量配…

详细解析Python爬虫代理的使用方法

嗨&#xff0c;大家好&#xff01;作为一名专业的代理IP供应商&#xff0c;我想和你们聊一聊爬虫中常用的代理IP类型以及如何在Python中使用代理IP。相信这篇文章会让你对Python爬虫代理IP的使用有更深入的了解。那么&#xff0c;不多说&#xff0c;让我们开始吧&#xff01; …

lua学习-3 循环和流程控制

这里写目录标题 判断for 循环数值遍历泛型遍历遍历数组遍历对象ipairs 和 pairs的异同 while 循环repeat循环goto基础用法注意事项 判断 for 循环 数值遍历 for exp1,exp2,exp3 do//todoend上述代码是指&#xff1a;从exp1 到exp2 以exp3为步长进行循环并执行todo代码&#…

HLS实现CORDIC算法计算正余弦并上板验证

硬件&#xff1a;ZYNQ7010 软件&#xff1a;MATLAB 2019b、Vivado 2017.4、HLS 2017.4、System Generator 2017.4 1、CORDIC算法计算正余弦 CORDIC算法详细分析网上有很多资料&#xff0c;它的原理是用一系列旋转去逼近目标角度&#xff0c;这一系列旋转的角度为 θ a r c t…

Unity中实现获取InputField选中的文字

一&#xff1a;前言 获取到选中的文字&#xff1a;哈哈 二&#xff1a;实现 UGUI的InputField提供了selectionAnchorPosition和selectionFocusPosition&#xff0c;开始选择时的光标下标和当前光标下标 using UnityEngine; using UnityEngine.EventSystems; using UnityEngin…