Vue路由使用的几个注意点

news2024/11/18 23:40:51

前言

在使用vue的路由的时候,是有几个需要注意的点,下面一一说明

组件的分类

组件分为两种:路由组件和一般组件

路由组件是注册到路由器中,并且是由路由相关标签代码进行展示
一般组件是注册到组件中,通过组件标签进行展示

为了区分两种组件,我们可以创建在src文件夹中创建一个pages文件夹,这里面一般放的是路由组件,components里面放一般组件,这样可以更加便于管理组件

从某种程度上来说,路由组件也算一个微型的页面,有自己的结构和样式以及数据交互

在这里插入图片描述

路由组的件挂载和销毁

不用的组件或者隐藏的组件其实是被销毁了

在进行路由组件切换的时候,其实是挂载和销毁两个动作一直在被实现
如何证明呢,可以是由钩子函数验证

在这里插入图片描述

通过控制台可以发现,确实这这样的,点击Home组件,about组件就会被调用销毁前的函数

在这里插入图片描述

全新配置

是由路由后,组件的this,也就是vc实例对象会多两个东西:

$route和$router

在这里插入图片描述

$route

首先是$route,它里面有路由的配置信息,如下可以看到组件路径

这个$route每个组件都有,但是里面的信息是不一样的,可以根据这一点进行传参

在这里插入图片描述

$router

整个应用只有一个router,哪怕写了1万个路由规则,也只会被这一个路由器进行保管

多个路由共享一个router,里面的信息是一样的,router里面有很多api可以共我们使用

在这里插入图片描述

总结

  1. 路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹。

  2. 通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。

  3. 每个组件都有自己的$route属性,里面存储着自己的路由信息。

  4. 整个应用只有一个router,可以通过组件的$router属性获取到。

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

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

相关文章

Linux常用命令——route命令

在线Linux命令查询工具(http://www.lzltool.com/LinuxCommand) route 显示并设置Linux中静态路由表 补充说明 route命令用来显示并设置Linux内核中的网络路由表,route命令设置的路由主要是静态路由。要实现两个不同的子网之间的通信,需要一台连接两个…

【软件架构思想系列】从伟人《矛盾论》中悟到的软件架构思想真谛:“对象”即事物,“函数”即运动变化...

引子 形而上学和辩证法两种宇宙观是截然相反的。“所谓形而上学的或庸俗进化论的宇宙观,就是用孤立的、静止的和片面的观点去看世界。这种宇宙观把世界一切事物,一切事物的形态和种类,都看成是永远彼此孤立和永远不变化的”,“和形而上学的宇宙观相反,唯物辩证法的宇宙观主…

元宇宙与数字孪生有区别

在元宇宙爆红之前,有一项技术已经慢慢渗透到各行各业之中,它可以逼真、实时地还原现实世界,它就是——数字孪生。目前很多人认为元宇宙与数字孪生的区别不大,元宇宙是数字孪生在技术层面的进阶与优化。其实不然,元宇宙…

IMX Linux 用户手册 --- 2

IMX Linux 用户手册 — 2 第5章 启用单独仿真 可以在i.MX 6DualLite SABRE-SD和i.MX 6DualLite SABRE-AI板上启用单独仿真。这是通过使用 引导加载程序构建过程中的特定U-Boot配置。 当在i.MX 6DualLite SABRE平台上启用此单独仿真时,i.MX 6DualLite的功能将更改为…

高通开发系列 - MSM8909指示灯操作

By: fulinux E-mail: fulinux@sina.com Blog: https://blog.csdn.net/fulinus 喜欢的盆友欢迎点赞和订阅! 你的喜欢就是我写作的动力! 目录 最近在做内核升级,但是内核串口log始终无法打印,也不清楚是不是内核跑飞了还是什么原因,先尝试点亮一个LED灯来判断下。 这里面我们…

docker start启动容器不报错,却无法正常启动

问题描述:想启动 1e 这个容器 start后,没有报错,但是就是启动不了… 原因 查看一下日志 docker logs 1e1b85322dfa好家伙,虽然它运行命令的时候不报错,但是它运行错误信息写到日志里面去了,查看最新的日记信息看…

回收租赁商城系统功能拆解14讲-分销设置

回收租赁系统适用于物品回收、物品租赁、二手买卖交易等三大场景。 可以快速帮助企业搭建类似闲鱼回收/爱回收/爱租机/人人租等回收租赁商城。 回收租赁系统支持智能评估回收价格,后台调整最终回收价,用户同意回收后系统即刻放款,用户微信零…

MySQL8.0版本怎样进行CentOS系统配置?

MySQL安装完成后,会自动配置为名称叫做:mysqld的服务,可以被systemctl所管理,我们在进行系统的配置时,主要修改root密码和允许root远程登录。 # 通过grep命令,在/var/log/mysqld.log文件中,过滤…

深度学习论文: Multi-modal Sensor Fusion for Auto Driving Perception: A Survey

深度学习论文: Multi-modal Sensor Fusion for Auto Driving Perception: A Survey Multi-modal Sensor Fusion for Auto Driving Perception: A Survey PDF: https://arxiv.org/pdf/2202.02703.pdf PyTorch代码: https://github.com/shanglianlm0525/CvPytorch PyTorch代码: h…

图论中的GLM模型

下面是我对GLM模型的理解: 数据编码的方式 在一般统计中,常用的coding方式有dummy,effect和cell.mean,这个在R和python中都可以实现。 dummy coding 举例 假设有4个组别A, B, C, D,它的自由度是4-13,因此…

自动驾驶专题介绍 ———— APA标准(ISO 16787)

文章目录介绍通用要求泊车控制最大运行速度退出条件建议空间车位水平空间车位垂直空间车位泊车流程流程定义Queiscent ModeSearch ModeSlot FoundMode SelectionAssisted Parking ModeEnd of Assisted Parking Mode人机交互策略车位搜索阶段车位搜索到且未激活泊车驾驶员请求泊…

【手写 Promise 源码】第七篇 - 实现 Promise 返回值 x 的处理

一,前言 上篇,实现了 Promise 的链式调用功能,主要涉及到以下几个点: 介绍了 Promise 的链式调用,返回普通值和抛出异常的共5种情况;分析了当前 Promise 源码的问题以及解决方案;Promise 链式…

亚马逊云科技:大模型的训练和应用门槛亟需降低

在过去的两周里,ChatGPT的热度居高不下,引发全网讨论。虽然AlphaGo这类AI产品也曾引起热议,但是在应用层面终究还是离用户太远了。而ChatGPT更像是「民用级」的产品,真正意义上让AI技术跨入广泛破圈应用时代。在当下,机…

如何准确测试75 Ohm系统的信号?

射频同轴线缆特征阻抗的选择,主要取决于功率容量、衰减强度、可加工性等因素,然而最大功率容量和最小衰减性能对应的特征阻抗是不同的。在射频领域通常采用50 Ohm特征阻抗的原因,就是综合考虑了以上因素。也就是说,50 Ohm特征阻抗…

Vue安装并使用路由和路由器实现页面跳转

前言 想要使用路由和路由器实,必须要知道什么是路由和路由器,可以参考这篇文章:Vue路由和路由器简介 下面通过编写代码演示一下如何使用路由和路由器实现页面跳转。 引入bootstrap.css 本案例所有相关的样式,都是引入的bootst…

基于 Toad 的评分卡模型全流程详解(内含 Python 源码)

不知不觉中,Python 已经在短短几年内一跃成为最热门的编程语言之一,尤其是在数据科学、人工智能和机器学习领域。这除了因为Python相对简单易学,可读性高之外,也有很大一部分原因是因为Python有着良好的开源生态从而产生了许多强大…

Golang如何优雅接入多个远程配置中心?

本文基于viper实现了apollo多实例快速接入,授人以渔,带着大家读源码,详解实现思路,封装成自己的工具类并且开源。 前言 viper是适用于go应用程序的配置解决方案,这款配置管理神器,支持多种类型、开箱即用、…

livedata+ lambda遇到的坑

首先抛出个异常FATAL EXCEPTION: mainProcess: com.lion.media, PID: 5513java.lang.IllegalArgumentException: Cannot add the same observer with different lifecyclesat androidx.lifecycle.LiveData.observe(LiveData.java:199)这是在livedata.observe(this) {// ...}触发…

Android studio Logcat 新版使用命令指南 常用命令集合

只过滤自己的包名 package:mine 过滤自己的包名且只看error级别日志 package:mine level:error 指定消息内容包含12288 message:12288 指定内容不包含12288 -message:12288 其中有 message: 、message~、-message和 -message~ -:对当前标签的过滤结果取反…

智能驾驶 车牌检测和识别(三)《CRNN和LPRNet实现车牌识别(含车牌识别数据集和训练代码)》

智能驾驶 车牌检测和识别(三)《CRNN和LPRNet实现车牌识别(含车牌识别数据集和训练代码)》 目录 智能驾驶 车牌检测和识别(三)《CRNN和LPRNet实现车牌识别(含车牌识别数据集和训练代码&#xf…