路由模块封装

目录

一、问题引入

二、步骤


一、问题引入

随着项目内容的不断扩大,路由也会越来越多,把所有的路由配置都堆在main.js中就不太合适了,所以需要将路由模块抽离出来。其好处是:拆分模块,利于维护。

二、步骤

将路由相关的代码,移动到router文件夹下的index.js文件中(由于挪到了不同的目录,所以在导入的时候,from后面的路径要根据实际情况微调,如果目录层级比较深,可以使用@/......的方式,这代表从src目录为起点来确定文件路径),如图:

然后在main.js文件中只需要导入当前的路由,并注入到当前实例中,即可完成路由的使用。将来配置的路由的规则只需要在index.js中进行修改即可。

index.js示例如下图:

创建好路由对象router后,再通过export default router导出。这样在main.js文件中就可以通过import router from........来使用路由对象router了。

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

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

相关文章

小巧简单实用的Linux端口转发工具Rinetd

Linux下实现端口转发有很多种方法,尤其是在可以联网的情况下,更是容易。最近在资源受限的定制系统中,找到一个方便离线安装和使用的端口转发工具Rinetd,安装包仅几十K,而且有很多版本的Linux发行系统的支持。 1、安装…

Spring底层入门(九)

boot的执行流程分为构造SpringApplication对象、调用run方法两部分 1、Spring Boot 执行流程-构造 通常我们会在SpringBoot的主启动类中写以下的代码: 参数一是当前类的字节码,参数二是main的args参数。 public class StartApplication {public static…

解决jar包中没有主清单目录的问题

文章目录 解决jar包中没有主清单目录的问题问题描述环境描述方法一 | 阿里巴巴构造器的通用解决方案方式二 | 指定MANIFEST.MF路径 解决jar包中没有主清单目录的问题 问题描述 很简单可能很多人都遇到过,maven项目打成jar包后执行报错:jar包中没有主清单…

揭秘:深度学习与自然语言处理的本质差异

在人工智能的广阔天地中,深度学习与自然语言处理犹如两颗耀眼的明星,各自绽放着光芒。尽管它们时常在科技文章中齐头并进,但它们的核心区别与联系常常令人迷惑。如果你希望一次性搞懂这两个人工智能领域的差异和联系,那么本文将是…

2024OD机试卷-数组连续和 (java\python\c++)

题目:数组连续和 题目描述 给定一个含有N个正整数的数组, 求出有多少个连续区间(包括单个正整数), 它们的和大于等于x。 输入描述 第一行两个整数N x(0 < N <= 100000, 0 <= x <= 10000000) 第二行有N个正整数(每个正整数小于等于100)。 输出描述 输出一…

Spring Security 入门 2

1.项目实战 就以RuoYi-Vue 为例吧&#xff0c;主要以下几点原因&#xff1a; 基于 Spring Security 实现。 基于 RBAC 权限模型&#xff0c;并且支持动态的权限配置。 基于 Redis 服务&#xff0c;实现登录用户的信息缓存。 前后端分离。同时前端采用 Vue &#xff0c;相对来…

ai可以做思维导图吗?当然是可以的!

ai可以做思维导图吗&#xff1f;在快节奏的现代生活中&#xff0c;思维导图作为一种高效的信息组织和表达工具&#xff0c;越来越受到人们的青睐。随着人工智能&#xff08;AI&#xff09;技术的不断发展&#xff0c;AI思维导图软件也应运而生&#xff0c;它们不仅能够帮助用户…

Qt | QValidator 抽象类(验证器)及其子类|QDoubleValidator 类|QIntValidator 类

01、上节回顾 Qt | QComboBox(组合框)Qt | QLineEdit 类(行编辑器)02、QValidator 1、QValidator 类直接继承自 QObject 类,且是一个抽象类,因此具体功能主要由其子类来实现,或者子类化该类实现自定义的验证器。 2、验证器的作用是验证用户输入的

Orange3数据可视化(小提琴图)

小提琴图 小提琴图和箱线图类似&#xff0c;用来显示数据分布和概率密度。结合了箱线图和密度图的特征&#xff0c;用来显示数据的分布形状。 输入 数据: 输入数据集 输出 选中的数据: 从图中选中的实例 数据: 增加了一列&#xff0c;显示数据点是否被选中 …

k8s DaemonSet

DaemonSet 是k8s节点上的守护进程。 ReplicaSet 和 DaemonSet 的区别&#xff1a; ReplicaSet 部署在不同节点上的 pod 是随机分布的。DaemonSet 部署在不同节点上的 pod 的数量是刚好一个的&#xff0c;因此DaemonSet 不需要期望数量。 DaemonSet 将 pod 部署到集群中的所有…

java随机生成6位验证码,首位不能是0

在Java中&#xff0c;要随机生成一个6位的验证码&#xff0c;其中首位不能为0&#xff0c;可以使用以下代码示例&#xff1a; import java.util.Random;public class VerificationCodeGenerator {public static void main(String[] args) {System.out.println(generateVerific…

three.js 效果细节提升

1. three.js 效果细节提升 加载模型时&#xff0c;给模型设置接受阴影&#xff0c;反射阴影 gltfLoader.load("./model/court-transformed.glb", (gltf) > {gltf.scene.traverse(child > {if (child.isMesh) {child.castShadow true; // 设置阴影可以投射阴…

【Linux】yum与vim

文章目录 软件包管理器&#xff1a;yumLinux安装和卸载软件包Linux中的编辑器&#xff1a;vimvim下的底行模式vim下的正常模式vim下的替换模式vim下的视图模式vim下的多线程 软件包管理器&#xff1a;yum yum其实就是一个软件,也可以叫商店 和你手机上的应用商店或app store一…

【C++】详解STL容器之一的deque和适配器stack,queue

目录 deque的概述 deque空间的结构 deque的迭代器 deque的数据设计 deque的优缺点 适配器的概念 ​编辑 stack的概述 stack的模拟实现 queue的概述 queue的模拟实现 deque的概述 deque的设计参考了另外两大容器vector和list。可参考下面两篇文章 详解vector&#x…

Unity DOTS1.0(9) Struct Change

Struct Change 概念&#xff1a; 一些引发了unity重新排列chunk内存,改变了chunk数据内容的一些操作&#xff0c;叫做structural changes。这个操作消耗很大&#xff0c;并且只能在主线程里面运行。所以了解清楚很重要。 导致Struct Change的操作&#xff1a; 1. 创建一个E…

Spring Boot 整合 socket 实现简单聊天

来看一下实现的界面效果 pom.xml的maven依赖 <!-- 引入 socket --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency><!-- 引入 Fastjson &#x…

bert-NER 转化成 onnx 模型

保存模型 加载模型 from transformers import AutoTokenizer, AutoModel, AutoConfigNER_MODEL_PATH ./save_model ner_tokenizer AutoTokenizer.from_pretrained(NER_MODEL_PATH) ner_config AutoConfig.from_pretrained(NER_MODEL_PATH) ner_model AutoModelForTokenCl…

【雅思写作】Vince9120雅思小作文笔记——P1 Intro(前言)

文章目录 链接P1 Intro&#xff08;前言&#xff09;字数限制题型综述&#xff08;problem types overview&#xff09;1. **柱状图&#xff08;Bar Chart&#xff09;** - 描述不同类别在某个或多个变量上的数据量比较。2. **线图&#xff08;Line Graph&#xff09;** - 展示…

uboot ping不了

主机无线连接wifi&#xff0c;开发板有线连接主机&#xff0c;虚拟机需要开双网卡模式。一卡为桥接模式&#xff0c;负责连通开发板&#xff1b;一开为nf模式&#xff0c;负责联网。 部分网络芯片没有MAC地址&#xff0c;每次重启会随机生成一个MAC地址来使用&#xff0c;导致…

冯喜运:5.10黄金反弹受阻,原油EIA库存激增引发市场情绪

【黄金消息面分析】&#xff1a;据最新市场数据显示&#xff0c;现货黄金在周四欧市早盘经历了显著下滑&#xff0c;价格一度跌破2310美元/盎司的关口&#xff0c;日内高点回落达10美元&#xff0c;截至发稿&#xff0c;黄金小幅反弹&#xff0c;交投于2312美元/盎司附近。此番…