Vue基础知识:路由的封装抽离,路由模块的封装抽离的好处是什么?,如何快速的引入组件,基于@指代src目录,从src目录出发找组件

news2024/10/7 15:22:12

如果将所有的路由配置都存放在main.js中,是非常有问题的,杂且乱。所以我们要将路由模块进行抽离,这样有利于:拆分模块,利于维护。大致的做法就是将路由相关的东西放到router这个文件夹的index.js中,而将来只需要将index.js导入到main.js中渲染就可以了。

具体步骤演示:

1.在src文件夹中创建router文件夹

2.在router中创建index.js

3.复制粘贴main.js中关于路由相关的代码到router中index.js中

(其中有三个注意点,要导入vue和导出router这个对象,并且路径不要搞错)

快速引入组件:

基于@指代src目录,从src目录出发找组件

 4.在main.js中导入router中的index.js文件

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

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

相关文章

机器学习数据预处理—统计分析方法

数据预处理 1 数据规范化 量纲,指将一个物理导出量用若干基本量的乘方之积表示出来的表达式。数据的比较需要关注两点——绝对数值和量纲,而特征间因为量纲的存在导致无法直接通过绝对数值比较大小,也就无法判断特征间的重要性。例如若某个…

【PyQt5篇】和子线程进行通信

文章目录 &#x1f354;使用QtDesigner进行设计&#x1f6f8;和子线程进行通信&#x1f388;运行结果 &#x1f354;使用QtDesigner进行设计 我们首先使用QtDesigner设计界面 得到代码login.ui <?xml version"1.0" encoding"UTF-8"?> <ui …

File,IO流,递归详解

File类 介绍 java.io.File类是Java语言提供了用来描述文件和目录(文件夹)的 构造 方法 注意&#xff1a; 构造方法中通常用的是第一个方法文件和目录可以通过File封装成对象File封装的对象仅仅是一个路径名&#xff0c;它是可以存在的&#xff0c;也可以不存在 绝对路径…

图片批量高效管理,图片像素缩放支持自定义操作,让图像处理更轻松

在数字化时代&#xff0c;图片管理成为了我们生活和工作中不可或缺的一部分。无论是个人用户还是企业用户&#xff0c;都需要对大量的图片进行有效的管理和处理。然而&#xff0c;面对众多的图片&#xff0c;如何进行批量管理并对其进行像素缩放成为了一个挑战&#xff0c;该如…

web学习笔记(五十三)身份认证

目录 1.Web 开发模式 1.1 服务端渲染的 Web 开发模式 1.2 服务端渲染的优缺点 1.3 前后端分离的 Web 开发模式 1.4 如何选择 Web 开发模式 2. 身份认证 2.1 Session 认证机制 3. 在 Express 中使用 Session 认证 3.1 安装express-session 中间件 3.2 配置 express-ses…

JVM内存性能调优思路之:通过GC log、Thread Dump 、Heap Dump分析内存使用说明

文章目录 一. 各日志概述1. Garbage Collection Log - 找到GC规律2. 线程转储(Thread dump) - 分析&#xff08;快照&#xff09;线程状态3. 堆转储(Heap dump) - APP某刻内存使用全貌 二. 命令1. 程序的gc日志2. 线程转储3. 堆转储 概述 在 Java 虚拟机中&#xff0c;(GC) Gar…

linux 文件提权|属性修改

文章目录 suid&#xff08;set uid&#xff09;添加文件属性查看文件属性i &#xff08;immutable&#xff09; umask suid&#xff08;set uid&#xff09; 让文件在执行的时候具有属主&#xff08;对应文件 user &#xff09;的权限 chmod 7744 temp.txt 第一位的7表示权限位…

软件自动化测试的难点怎么解决

软件自动化测试是一种使用工具或脚本来代替人工执行测试用例的方法&#xff0c;它可以提高测试的效率和质量&#xff0c;但也存在一些挑战和问题。 总结了以下几个常见的难点和解决方案&#xff1a; 接口文档的不完整性&#xff1a;有些接口的文档没有说明清楚必要的字段、参…

深入理解数据结构第三弹——二叉树(3)——二叉树的基本结构与操作

二叉树&#xff08;1&#xff09;&#xff1a;深入理解数据结构第一弹——二叉树&#xff08;1&#xff09;——堆-CSDN博客 二叉树&#xff08;2&#xff09;&#xff1a;深入理解数据结构第二弹——二叉树&#xff08;2&#xff09;——堆排序及其时间复杂度-CSDN博客 前言…

【前端Vue】Vue3+Pinia小兔鲜电商项目第4篇:静态结构搭建和路由配置,1. 准备分类组件【附代码文档】

Vue3ElementPlusPinia开发小兔鲜电商项目完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;认识Vue3&#xff0c;使用create-vue搭建Vue3项目1. Vue3组合式API体验,2. Vue3更多的优势,1. 认识create-vue,2. 使用create-vue创建项目,1. setup选项的写法和执行…

C语言解决汉诺塔问题

背景 首先带大家了解一下汉诺塔问题 汉诺塔是一个典型的函数递归问题&#xff0c;汉诺塔描述了这样的场景&#xff0c;有三个柱子&#xff0c;A,B,C&#xff0c;A柱为起始柱&#xff0c;在A柱上面有若干大小不同的盘子&#xff0c;最下面的最大&#xff0c;最上面的最小&#x…

Linux系统下安装ElasticSearch

一、228环境ES使用安装 1、检验ES服务是否安装成功的方法 &#xff08;1&#xff09;查看Elasticsearch进程是否成功 ps -ef|grep elasticsearch &#xff08;2&#xff09;linux elasticsearch下访问&#xff08;curl带认证访问&#xff09; curl --user elastic:Zhes.13…

CSS面试题常用知识总结day03

大家好我是没钱的君子下流坯&#xff0c;用自己的话解释自己的知识 前端行业下坡路&#xff0c;甚至可说前端已死&#xff0c;我还想在前段行业在干下去&#xff0c;所以从新开始储备自己的知识。 从CSS——>Javascript——>VUE2——>Vuex、VueRouter、webpack——>…

STM32F103C8T6-CAN

本文内容 HAL库下printf重定向解决问题&#xff1a;Keil下调试可以正常运行&#xff0c;而下载后运行不了CAN总线的回环测试&#xff0c;自发自收 printf重定向 实现printf重定向的目的是方便调试&#xff0c;通过UART查看打印的调试信息。 下面以STM32F103C8T6为例&#xf…

【前沿模型解析】潜在扩散模 1 | LDM第一阶段-感知图像压缩总览

文章目录 0 开始~1 感知压缩的目的2 自回归编码器-解码器生成模型一览2.1 AE 自编码器2.2 VAE 变分自编码器2.3 VQ-VAE2.4 VQ-GAN 3 代码部分讲解总览 0 开始~ 从今天起呢&#xff0c;我们会剖析LDM&#xff08;潜在扩散模型&#xff09; 从去年开始&#xff0c;大量的生成模…

数学建模-------MATLAB分支循环断点调试

1.if语句 &#xff08;1&#xff09;分段函数的引入&#xff08;这里的数据表示的是分数的不同区间对应的等级&#xff09; (1)这个就是一个十分简单的if语句&#xff0c;无论是if还是elseif后面都是不能添加任何分号的&#xff0c;这个例子就是一个分段的函数&#xff0c;在不…

基础总结篇:Activity生命周期

private int param 1; //Activity创建时被调用 Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Log.i(TAG, “onCreate called.”); setContentView(R.layout.lifecycle); Button btn (Button) findViewById(R.id.…

医药行业痛点以及OKR解决方案

一、背景 随着医药行业的快速发展和市场竞争的加剧&#xff0c;企业面临着前所未有的挑战和机遇。为了在激烈的市场竞争中立于不败之地&#xff0c;某知名医药企业决定引入OKR&#xff08;Objectives and Key Results&#xff0c;目标与关键成果&#xff09;管理模式&#xff0…

Gradle入门初探

一、Gradle简介&#xff1a; 我们都创建过基于Maven的项目&#xff0c;maven可以很好的管理项目的依赖&#xff0c;编译和打包项目&#xff0c;Gradle是一个和Maven类似的自动化构建工具&#xff0c;Maven是基于xml文件格式&#xff0c;而Gradle是基于Groovy的语言&#xff0c…

dm8数据迁移工具DTS

dm8数据迁移工具DTS DTS工具介绍 DM数据迁移工具提供了主流大型数据库迁移到DM、DM到DM、文件迁移到DM以及DM迁移到文件的功能。DM数据迁移工具采用向导方式引导用户通过简单的步骤完成需要的操作。 DM数据迁移工具支持&#xff1a; ◆ 主流大型数据库Oracle、SQLServer、MyS…