路由模块封装

目录

一、问题引入

二、步骤


一、问题引入

随着项目内容的不断扩大,路由也会越来越多,把所有的路由配置都堆在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.rhkb.cn/news/323348.html

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

相关文章

linux PXE高效批量网络装机

PXE批量部署的优点 规模化:同时装配多台服务器 自动化:安装系统、配置各种服务 远程实现:不需要光盘、U盘等安装介质 部署PXE远程安装服务 搭建PXE远程安装服务器 先做好初始化准备 1.安装并启用 TFTP 服务 yum -y install tftp-server …

从开发角度理解漏洞成因(02)

文章目录 文件上传类需求文件上传漏洞 文件下载类需求文件下载漏洞 扩展 留言板类(XSS漏洞)需求XSS漏洞 登录类需求cookie伪造漏洞万能密码登录 持续更新中… 文章中代码资源已上传资源,如需要打包好的请点击PHP开发漏洞环境(SQL注…

缓存相关问题:雪崩、穿透、预热、更新、降级的深度解析

✨✨祝屏幕前的小伙伴们每天都有好运相伴左右✨✨ 🎈🎈作者主页: 喔的嘛呀🎈🎈 目录 引言 1. 缓存雪崩 1.1 问题描述 1.2 解决方案 1.2.1 加锁防止并发重建缓存 2. 缓存穿透 2.1 问题描述 2.2 解决方案 2.2.1 …

基于TL431和CSA的恒压与负压输出

Hello uu们,51去那里玩了呀?该收心回来上班了,嘿嘿! 为什么会有这个命题,因为我的手头只有这些东西如何去实现呢?让我们一起来看电路图吧.电路图如下图1所示 图1:CSA恒压输出电路 图1中,R1给U2提供偏置,Q1给R1提供电流,当U1-VOUT输出大于2.5V时候,U2内部的三极管CE导通,使得…

Golang | Leetcode Golang题解之第73题矩阵置零

题目&#xff1a; 题解&#xff1a; func setZeroes(matrix [][]int) {n, m : len(matrix), len(matrix[0])col0 : falsefor _, r : range matrix {if r[0] 0 {col0 true}for j : 1; j < m; j {if r[j] 0 {r[0] 0matrix[0][j] 0}}}for i : n - 1; i > 0; i-- {for …

Python的Web框架Flask+Vue生成漂亮的词云图

生成效果图 输入待生成词云图的文本&#xff0c;点击生成词云即可&#xff0c;在词云图生成之后&#xff0c;可以点击下载图片保存词云图。 运行步骤 分别用前端和后端编译器&#xff0c;打开backend和frontend文件夹。前端运行 npm install &#xff0c;安装相应的包。后端…

【prometheus】Pushgateway安装和使用

目录 一、Pushgateway概述 1.1 Pushgateway简介 1.2 Pushgateway优点 1.3 pushgateway缺点 二、测试环境 三、安装测试 3.1 pushgateway安装 3.2 prometheus添加pushgateway 3.3 推送指定的数据格式到pushgateway 1.添加单条数据 2.添加复杂数据 3.SDk-prometheus-…

Python深度学习基于Tensorflow(8)自然语言处理基础

RNN 模型 与前后顺序有关的数据称为序列数据&#xff0c;对于序列数据&#xff0c;我们可以使用循环神经网络进行处理&#xff0c;循环神经网络RNN已经成功的运用于自然语言处理&#xff0c;语音识别&#xff0c;图像标注&#xff0c;机器翻译等众多时序问题&#xff1b;RNN模…

16地标准化企业申请!安徽省工业和信息化领域标准化示范企业申报条件

安徽省工业和信息化领域标准化示范企业申报条件有哪些&#xff1f;合肥市 、黄山市 、芜湖市、马鞍山、安庆市、淮南市、阜阳市、淮北市、铜陵市、亳州市、宣城市、蚌埠市、六安市 、滁州市 、池州市、宿州市企业申报安徽省工业和信息化领域标准化示范企业有不明白的可在下文了…

《TAM》论文笔记(上)

原文链接 [2005.06803] TAM: Temporal Adaptive Module for Video Recognition (arxiv.org) 原文代码 GitHub - liu-zhy/temporal-adaptive-module: TAM: Temporal Adaptive Module for Video Recognition 原文笔记 What&#xff1a; TAM: Temporal Adaptive Module for …

JAVA系列:IO流

JAVA IO流 IO流图解 一、什么是IO流 I/O流是Java中用于执行输入和输出操作的抽象。它们被设计成类似于流水&#xff0c;可以在程序和外部源&#xff08;如文件、网络套接字、键盘、显示器等&#xff09;之间传输数据。按处理数据单位分为&#xff1a; 1字符 2字节 、 1字节(…

阿里发布通义千问2.5:一文带你读懂通义千问!

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…

【Linux系统编程】31.pthread_detach、线程属性

目录 pthread_detach 参数pthread 返回值 测试代码1 测试结果 pthread_attr_init 参数attr 返回值 pthread_attr_destroy 参数attr 返回值 pthread_attr_setdetachstate 参数attr 参数detachstate 返回值 测试代码2 测试结果 线程使用注意事项 pthread_deta…

AI智能分析高精度烟火算法EasyCVR视频方案助力打造森林防火建设

一、背景 随着夏季的来临&#xff0c;高温、干燥的天气条件使得火灾隐患显著增加&#xff0c;特别是对于广袤的森林地区来说&#xff0c;一旦发生火灾&#xff0c;后果将不堪设想。在这样的背景下&#xff0c;视频汇聚系统EasyCVR视频融合云平台AI智能分析在森林防火中发挥着至…

GeoServer 任意文件上传漏洞分析研究 CVE-2023-51444

目录 前言 漏洞信息 代码审计 漏洞复现 前言 时隔半月&#xff0c;我又再一次地审起了这个漏洞。第一次看到这个漏洞信息时&#xff0c;尝试复现了一下&#xff0c;结果却很不近人意。从官方公布的漏洞信息来看细节还是太少&#xff0c;poc不是一次就能利用成功的。也是当时…

AXI4读时序在AXI Block RAM (BRAM) IP核中的应用

在本文中将展示描述了AXI从设备&#xff08;slave&#xff09;AXI BRAM Controller IP核与Xilinx AXI Interconnect之间的读时序关系。 1 Single Read 图1展示了一个从32位BRAM&#xff08;Block RAM&#xff09;进行AXI单次读取操作的时序示例。 图1 AXI 单次读时序图 在该…

书生浦语训练营第三次课笔记:XTuner 微调 LLM:1.8B、多模态、Agent

Finetune 简介 两种Finetune范式&#xff1a;增量预训练微调、指令跟随微调 微调数据集 上述是我们所期待模型回答的内容&#xff0c;在训练时损失的计算也是基于这个。 训练数据集看起来是这样&#xff0c;但是真正喂给模型的&#xff0c;是经过对话模板组装后的 下图中&…

信息系统项目管理师0097:价值交付系统(6项目管理概论—6.4价值驱动的项目管理知识体系—6.4.6价值交付系统)

点击查看专栏目录 文章目录 6.4.6价值交付系统1.创造价值2.价值交付组件3.信息流6.4.6价值交付系统 价值交付系统描述了项目如何在系统内运作,为组织及其干系人创造价值。价值交付系统包括项目如何创造价值、价值交付组件和信息流。 1.创造价值 项目存在于组织中,包括政府机构…

ICode国际青少年编程竞赛- Python-2级训练场-数独

ICode国际青少年编程竞赛- Python-2级训练场-数独 1、 Spaceship.step(3)2、 Spaceship.step(3)3、 Spaceship.step(1) Spaceship.turnLeft() Spaceship.step(1)4、 Spaceship.step(3) Spaceship.turnRight() Spaceship.step(1)5、 Spaceship.step(4) for i in range(3):Spaces…

(二十一)springboot实战——Spring AI劲爆来袭

前言 本节内容是关于Spring生态新发布的Spring AI的介绍&#xff0c;Spring AI 是一个面向人工智能工程的应用框架。其目标是将 Spring 生态系统的设计原则&#xff0c;如可移植性和模块化设计&#xff0c;应用到人工智能领域&#xff0c;并推广使用普通的Java对象&#xff08…