Vue中的router路由的介绍(快速入门)

路由的介绍

文章目录

    • 路由的介绍
      • 1、VueRouter的介绍
      • 2、VueRouter的使用(5+2)
        • 2.1、5个基础步骤(固定)
        • 2.2、两个核心步骤
      • 3、组件存放的目录(组件分类)

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

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

1、VueRouter的介绍

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

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

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

2、VueRouter的使用(5+2)

2.1、5个基础步骤(固定)
  1. 下载:下载 VueRouter模块到当前工程,版本3.6.5(Vue2对应的版本)

    yarn add vue-router@3.6.5
    
  2. 引入

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

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

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

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

    注入vueter对象之后:image-20231010113838639

Vue版本对应关系:

​ Vue2: VueRouter3.x Vuex3.x

​ Vue3: VueRouter4.x Vuex4.x

2.2、两个核心步骤
  1. 创建需要的组件(views目录),配路由规则

image-20231010115423564

  1. 准备导航链接,配置路由出口(匹配的组件展示的位置)

image-20231010115403718

3、组件存放的目录(组件分类)

vue文件本质无区别。路由相关的组件,为什么放在views目录呢?

  • 组件分类: .vue文件分2类:页面组件&复用组件(更易维护)

  • src/views文件夹

    • 页面组件–页面展示–配合路由
  • src/components文件夹

    • 复用组件–展示数据–常用于复用

文章推荐:Vue路由进阶–VueRouter声明式导航

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

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

相关文章

Ceph入门到精通-Nginx超时参数分析设置

nginx中有些超时设置,本文汇总了nginx中几个超时设置 Nginx 中的超时设置包括: “client_body_timeout”:设置客户端向服务器发送请求体的超时时间,单位为秒。 “client_header_timeout”:设置客户端向服务器发送请…

5项先进采购技术,帮助你的企业脱颖而出

持续的改进对保持每个企业的正常运转有着重要作用,采购部门也不例外。 以前,采购团队主要关注两个方面:降低成本和减少风险。随着自动化和云服务的兴起,如今他们还需要关注采购决策的效率、可访问性和可持续性。 技术与采购的融合…

【AI视野·今日Robot 机器人论文速览 第四十八期】Thu, 5 Oct 2023

AI视野今日CS.Robotics 机器人学论文速览 Thu, 5 Oct 2023 Totally 32 papers 👉上期速览✈更多精彩请移步主页 Daily Robotics Papers LanguageMPC: Large Language Models as Decision Makers for Autonomous Driving Authors Hao Sha, Yao Mu, Yuxuan Jiang, Li…

对音频切分成小音频(机器学习用)

我是把so-vits中小工具,分析源码然后提取出来了。以后可以写在自己的程序里。 -------流程(这是我做的流程,你可以不用看) 从开源代码中快速获取自己需要的东西 如果有界面f12看他里面的接口,然后在源码中全局搜索&…

Stable Diffusion生成图片

画质 masterpiece,best quality,illustration,extremely detail CG unity 8k wallpaper,ultra-detailed,depth of field 杰作,最佳质量,插图,极度详细的8K壁纸,超高详细度,景深 画风 Chinese ink painting,water color…

如何在虚幻引擎中渲染动画?

大家好,今天我将展示如何在虚幻引擎中渲染动画,以及虚幻引擎渲染动画怎么设置的方法步骤。 需要提前了解: 虚幻引擎本地运行慢、渲染慢、本地配置不够,如何解决? 渲云云渲染支持虚幻引擎离线渲染,可批量…

【Python】WebUI自动化—Selenium的下载和安装、基本用法、项目实战(16)

文章目录 一.介绍二.下载安装selenium三.安装浏览器驱动四.QuickStart—自动访问百度五.Selenium基本用法1.定位节点1.1.单个元素定位1.2.多个元素定位 2.控制浏览器2.1.设置浏览器窗口大小、位置2.2.浏览器前进、刷新、后退、关闭3.3.等待3.4.Frame3.5.多窗口3.6.元素定位不到…

一文5000字详解Pytest单元测试,看完不会来打我【保姆级教程】

一、pytest单元测试框架 1.什么是单元测试框架? 单元测试是指在软件开发当中针对软件的最小单位(函数、方法)进行正确性的检查测试 2.单元测试框架有哪些? Java:junit 和 testing python:unittest 和 …

SI314软硬件兼容替代GTX314L—低功耗14通道电容触摸传感器

Si314是一款具有自动灵敏度校准功能的14通道电容传感器,其工作电压范围为1.8~5.5V。 Si314设置休眠模式来节省功耗,此时,功耗电流为10uA3.3V。 Si314各个感应通道可实现独立使能、校准、灵敏度调节,可以确保可靠性,且具…

linux 安装下载conda并创建虚拟环境

目录 1. 下载安装2. 创建虚拟环境1. 下载安装 在window操作系统中下载anconda包,并通过scp传输到ubuntu操作系统 具体anconda包在如下界面: anconda包 目录 博主选择了最新的包:Anaconda3-2023.09-0-Linux-x86_64.sh 通过scp传输到ubuntu操作系统中: 并在ubuntu操作系…

Linux 安全 - LSM源码分析

文章目录 前言一、简介1.1 DAC 和 MAC1.2 LSM 调用流程图 二、LSM相关数据结构2.1 struct security_hook_list2.2 union security_list_options2.3 structure security_hook_heads 三、security_bprm_check四、LSM 源码分析3.1 early_security_init3.2 security_init3.2.1 secu…

第二证券:市场情绪或逐步修复 十月行情值得期待

第二证券指出,周一A股商场探底回升、小幅轰动收拾,沪指全天底子出现先抑后扬的运转特征。其时上证综指与创业板指数的平均市盈率分别为12.46倍、33.94倍,处于近三年中位数以下水平,商场估值仍然处于较低区域,合适中长期…

华为OD机考B卷 | 100分】阿里巴巴找黄金宝箱(JAVA题解——也许是全网最详)

前言 本人是算法小白,甚至也没有做过Leetcode。所以,我相信【同为菜鸡的我更能理解作为菜鸡的你们的痛点】。 题干 1. 题目描述 一贫如洗的樵夫阿里巴巴在去砍柴的路上,无意中发现了强盗集团的藏宝地,藏宝地有编号从0~N的箱子&…

【C++设计模式之责任链模式:行为型】分析及示例

简介 责任链模式是一种行为型设计模式,它允许将请求沿着处理链传递,直到有一个处理器能够处理该请求。这种模式将请求的发送者和接收者解耦,同时提供了更高的灵活性和可扩展性。 描述 责任链模式由多个处理器组成一个处理链,每…

香橙派、树莓派、核桃派、鲁班猫安装jupyter notebook【ubuntu、Debian开发板操作类似】

文章目录 前言一、安装环境二、使用方法总结 前言 香橙派树莓派鲁班猫安装一下调试代码还是比较方便的。 一、安装环境 假设已经安装好了miniconda3。如果还没安装可以参考我另外一篇博文,有写怎么安装。 pip install jupyter notebook # 生成Jupyter Notebook的…

算法题:K 次取反后最大化的数组和(典型的贪心算法问题)

这道题没有看题解,直接提交,成绩超越99.5%,说明思路是优的。就是考虑的情况里面弯弯绕比较多,需要考虑全面一点。(本题完整题目附在了最后面) 具体思路如下: 1、首先排序,然后从最…

智能合约漏洞,价值 5200 万美元的 Vyper 漏洞攻击原理分析

智能合约漏洞,价值 5200 万美元的 Vyper 漏洞攻击原理分析 7 月 30 日,因为 Vyper 部分版本中的漏洞,导致 Curve、JPEG’d 等项目陆续受到攻击,损失总计超过 5200 万美元。 Safful 对此事件第一时间进行了技术分析,并…

2023 IDC中国数字金融论坛丨中电金信向行业分享“源启+应用重构”新范式

9月8日,IDC主办的“2023 IDC中国数字金融论坛”在北京召开。中电金信受邀参会,并带来了深度数字化转型趋势之下关于应用重构的分享与洞见。 论坛重点关注金融科技创新发展趋势与数字化转型之路,中电金信副总经理、研究院院长况文川带来了“创…

nSoftware IPWorks IoT 2022 Java 22.0.8 Crack

物联网库,使用这个轻量级组件库,可以在任何平台上的应用程序中轻松实现物联网 (IoT) 通信协议。 nSoftware IPWorks IoT 最新的 IPWorks IoT 现已推出!最新版本的 IPWorks IoT 具有现代化和简化的体验,包括 .NET 中的异步和跨平台…

[开源]MIT协议,开源论坛程序,拥有友好的用户界面和操作体验

一、开源项目简介 尤得一物是一个开源论坛程序,提供丰富的功能,可以作为管理或分享文章的论坛博客,也可以在此基础上进行自定义开发。 二、开源协议 使用MIT开源协议 三、界面展示 四、功能概述 尤得一物是一个开源论坛程序,…