nuxt2路由,以及重构以前项目,路由使用
Nuxt.js根据pages目录结构自动生成vue-router模块的路由配置。
配置生成的路由可在.nuxt文件下的router.js文件中查看到,如:
export const routerOptions = {mode: 'history',base: '/',linkActiveClass: 'nuxt-link-active',linkExactActiveClass: 'nuxt-link-exact-active',scrollBehavior,routes: [{path: "/list",component: _0d6e904e,name: "list"}, {path: "/",component: _4b42c327,name: "index"}],fallback: false
}
- 路由跳转的方式 nuxt-link 与 $router.push
<template><div>首页<nuxt-link to="/list">list链接跳转</nuxt-link><button @click="btn">js跳转</button></div>
</template><script>
export default {name: "IndexPage",methods: {btn() {this.$router.push("/list");},},
};
</script>
- 路由传参
<template><div>首页<nuxt-link :to="{ name: 'list', query: { id: 1 }, params: { id: 2 } }">list链接跳转</nuxt-link><button @click="btn">js跳转</button></div>
</template>
<script>
export default {name: "IndexPage",methods: {// 若是记不清name对应的是params,path对应分query的话,就想26个英语单词pq连在一起就行。btn() {// this.$router.push({// name:'list',// params:{// id:1// }// });this.$router.push({path: "list",query: {id: 2,},});},},
};
</script>
list.vue 接收参数,与vue之前是一样的
<template><div>list 页面</div>
</template>
<script>
export default {name: "list",created() {console.log("$route:", this.$route);},methods: {},
};
</script>
- 路由管理,通常项目页面中需要生成子路由,或者动态路由。
- 生成子路由,如search下面需要生成children子路由detail.vue和list.vue。 则需要在pages目录下建立search.vue和search文件夹,然后在search文件夹下建立detail.vue和list.vue文件即可,自动生成的路由结构如下:
export const routerOptions = {mode: 'history',base: '/',linkActiveClass: 'nuxt-link-active',linkExactActiveClass: 'nuxt-link-exact-active',scrollBehavior,routes: [ /** * */{path: "/search",component: _6e5709ba,name: "search",children: [{path: "detail",component: _79c8be26,name: "search-detail"}, {path: "list",component: _36f5c88c,name: "search-list"},{path: ":id?", // 生成的动态路由component: _ce670164,name: "search-id"}]}],fallback: false
}
- 动态路由与上述子路由建立目录一样,只不过动态的vue文件需要依下划线开头建立vue文件如:_xxx.vue
- 若是遇到项目重构的时候,前项目router路由文件超级多的时候,去使用pages自生成router路由过程过于繁琐,则也可以不使用自生成的router路由,直接用前项目的router文件,配置如下:
- 先安装 @nuxtjs/router
npm i @nuxtjs/router -S
- 下载完成后,在nuxt.config.js中进行modules的配置
modules: ['@nuxtjs/router'],
- 在nuxt项目的根目录下前项目的router.js复制过来(起名最好叫router.js)
- 修改router.js里的componet引用内容,不要做懒加载引用,如
原先的js文件
const routes = [{path:'/list',name:'list',compinent:()=>{import('xxx/xxx/list.vue')}}
]
需要修改成现在的js方式
import List from 'xxx/xxx/list.vue'
const routes = [{path:'/list',name:'list',compinent: List}
]
- nuxtjs生成的路由与vue-router的路由返回结果不同,需要进行修改,
原vue-router的路由结果
const router = new VuwRouter({mode: 'history',base: process.env.BASE_URL,routes
})
需改成如下的返回结果,返回一个函数
export function createRouter(){return new VueRouter({mode: 'history',routes})
}
注意:运行启动若是报错,缺少nuxtjs/builder模块的话,则npm安装下此模块即可。
相关文章:
nuxt2路由,以及重构以前项目,路由使用
Nuxt.js根据pages目录结构自动生成vue-router模块的路由配置。 配置生成的路由可在.nuxt文件下的router.js文件中查看到,如: export const routerOptions {mode: history,base: /,linkActiveClass: nuxt-link-active,linkExactActiveClass: nuxt-link…...
eureka报错:链接8761被拒绝
eureka报错:链接8761被拒绝 来龙去脉 在idea环境中运行没有问题 我的配置是: server: port: 8001 spring: application: name: registry-server eureka: instance: hostname: localhost client: fetch-registry: false register-with-eureka: false …...
Linux 手动部署JDK21 环境
1、下载包(我下载的是tar) https://www.oracle.com/cn/java/technologies/downloads/#java21 完成后进行上传 2、检查已有JDK,并删除(我原有是jdk8) rpm -qa | grep -i java | xargs -n1 rpm -e --nodeps3、清理掉 profile中的j…...
【c2】编译预处理,gdb,makefile,文件,多线程,动静态库
文章目录 1.编译预处理:C源程序 - 编译预处理【#开头指令和特殊符号进行处理,删除程序中注释和多余空白行】- 编译2.gdb调试:多进/线程中无法用3.makefile文件:make是一个解释makefile中指令的命令工具4.文件:fprint/f…...
c++结构体用构造函数进行初始化
结构体能自由组装数据,是一种很常见的数据打包方法。 当我们定义一个结构体后,没有初始化就使用,就会使用到垃圾数据,而且这种错误很难发现。 在编程时对于定义的任何变量,我们最好都先初始化。 常见的操作是每定义…...
2024年五一数学建模C题完整解题思路代码
2024年第二十一届五一数学建模竞赛题目 C题 煤矿深部开采冲击地压危险预测 煤炭是中国的主要能源和重要的工业原料。然而,随着开采深度的增加,地应力增大,井下煤岩动力灾害风险越来越大,严重影响着煤矿的安全高效开采。在各类深…...
0018__GTK+:GTK+的简介、安装、使用方法之详细攻略
GTK:GTK的简介、安装、使用方法之详细攻略-CSDN博客...
环保访谈|浙江双视专注红外机器视觉及智能化应用,保障安全生产
近期,中联环保圈希姐采访了浙江双视科技股份有限公司环保行业销售总监孙波,深入了解了双视科技的发展历程、产品和解决方案、合作流程、核心竞争力以及未来规划。 双视于2014年创立,专注于红外机器视觉、人工智能技术与应用开发,…...
Web服务器
代码: WebServer 介绍 HTTP层 POST请求一般会包含Content-Length字段, 告诉服务器请求主体的长度GET请求一般不会包含Content-Length字段, 它一般不含请求正文POST响应: Content-Type字段, 根据请求资源的后缀填写 编写 1.读取请求与分析请求 2.根据不同请求方法构建不同的响…...
linux的firmware和hal层
linux的firmware和hal层 在Linux中,固件(firmware)和硬件抽象层(Hardware Abstraction Layer,HAL)是两个不同的概念。固件是运行在硬件设备上的程序,它们通常被用来控制硬件的操作。而HAL是一种…...
从ETL与ELT谈起,理解数仓的任务
最近有个朋友,有几十 PB 的异构数据,数据源包括 MySQL、DB2、Oracle、CSV、磁带机,等等,然后他需要把这些数据中的一些信息做关联整合,从这几十 PB 的数据中提取出若干业务字段到数据仓库,做统一分析。 数…...
esp32-cam 2. python opencv 拉取摄像头内容
0. 环境 - win10 python3 - pycharm - esp32-cam http://192.168.4.1 1. 创建工程 File -> Create Project -> -> Location: E:\Workspaces\PycharmProjects\esp32cam_opencv -> Create 2. opencv hello 2.1 添加脚本 File -> New -> Python f…...
js之遍历方法
先创建一个数组,然后使用for.in进行遍历,如下图所示sub代表下标并且遍历几次,arr代表数组 <script>let arr [1, 2, 3, 4, 5, 6];for (let sub in arr) {console.log(arr);}</script> 第二种方法则是for循环遍历,根据…...
Elementui的el-footer标签使用报错
Elementui的el-footer标签使用报错 其余标签的使用没有报错信息 el-footer的报错信息 原因: 警告信息表示 Vue 不识别 <el-footer> 解决方式: 在组件中进行引入和暴露...
Ubuntu24.04安装中文输入法
Ubuntu24.04安装中文输入法 为了更好的体验,请访问个人博客 www.huerpu.cc:7000 一、添加中文语言支持 在安装中文输入法之前,首选要添加中文语言支持。选择System,点击Region & Language。 点击Manage Install Languages。 点击Insta…...
八股kafka(一)
目录 1、面试官:Kafka是如何保证消息不丢失 2、面试官:Kafka中消息的重复消费问题如何解决的 3、面试官:Kafka是如何保证消费的顺序性 4、面试官:Kafka的高可用机制有了解过嘛 5、面试官:解释一下复制机制中的ISR 6、面…...
SemCity: 一个应用于真实户外环境场景生成的3D Diffusion模型
论文标题: SemCity: Semantic Scene Generation with Triplane Diffusion 论文作者: Jumin Lee1, Sebin Lee1, Changho Jo, Woobin Im, Juhyeong Seon, Sung-Eui Yoon 项目地址:https://sglab.kaist.ac.kr/SemCity/ 前言: 该论…...
鸿蒙内核源码分析(互斥锁篇) | 互斥锁比自旋锁丰满多了
内核中哪些地方会用到互斥锁?看图: 图中是内核有关模块对互斥锁初始化,有文件,有内存,用消息队列等等,使用面非常的广.其实在给内核源码加注的过程中,会看到大量的自旋锁和互斥锁,它们的存在有序的保证了内核和应用程序的正常运行.是非常基础和重要的功能. 概述 自旋锁 和…...
MySQL之查询 拿下 * 。*
DQL数据查询语言 对上述的的查询操作进行代码演示(续上一篇学生表代码进行处理) 下面是上一篇的代码分享 下面进行简单的查询操作 字符串如果强行进行算数运算默认只为0 查询时常用的单行函数列举 未完待续...
目标检测(二阶段)领域,常见词汇
1、Backbone(主干网络) 定义: Backbone是目标检测模型的基础部分,通常是一个预训练的卷积神经网络(如ResNet、VGG、MobileNet等),负责从输入图像中提取多层特征图。这些特征图包含了不同尺度和抽象级别的信…...
Nunchaku FLUX.1-dev实战:手把手教你用ComfyUI生成惊艳AI图片
Nunchaku FLUX.1-dev实战:手把手教你用ComfyUI生成惊艳AI图片 1. 环境准备与快速部署 1.1 硬件与软件要求 在开始之前,请确保你的系统满足以下基本要求: 显卡:NVIDIA显卡(推荐RTX 30/40系列,显存8GB&am…...
音乐标签编辑器:让本地音乐元数据管理效率提升90%的开源工具
音乐标签编辑器:让本地音乐元数据管理效率提升90%的开源工具 【免费下载链接】music-tag-web 音乐标签编辑器,可编辑本地音乐文件的元数据(Editable local music file metadata.) 项目地址: https://gitcode.com/gh_mirrors/mu/…...
Delphi MVC框架ActiveRecord中间件多连接配置详细解析[特殊字符]
1. 数组长度必须一致1234567// 错误示例 - 会抛出异常TMVCActiveRecordMiddleware.Create(MainDB,[LogDB, CacheDB], // 2个元素[LogDB_Def], // 1个元素 ← 错误!MultiConnections.ini);2. 连接名命名规范1234567// 建议使用有意义的命…...
3大核心价值!六音音源开源工具:洛雪音乐跨版本修复解决方案
3大核心价值!六音音源开源工具:洛雪音乐跨版本修复解决方案 【免费下载链接】New_lxmusic_source 六音音源修复版 项目地址: https://gitcode.com/gh_mirrors/ne/New_lxmusic_source 在数字音乐体验日益依赖软件生态的今天,洛雪音乐1.…...
LabVIEW 2018+ 也能玩转OpenCV了?手把手教你用秣厉科技工具包实现摄像头人脸识别
LabVIEW与OpenCV的跨界融合:零代码实现工业级视觉检测方案 当图形化编程遇上计算机视觉,会碰撞出怎样的火花?对于习惯了LabVIEW数据流编程的工程师来说,OpenCV那些复杂的矩阵运算和算法实现往往令人望而生畏。而现在,…...
Visio高效绘制神经网络卷积层:从基础到三维呈现
1. Visio绘制神经网络卷积层的入门指南 第一次用Visio画神经网络结构时,我盯着满屏的工具栏发懵——这玩意儿比Photoshop的图层还复杂。但摸索半天后发现,只要掌握几个核心功能,画卷积层其实比用PPT简单十倍。先说说最基础的形状选择…...
2026论文写作工具红黑榜:一键生成论文工具怎么选?别再瞎找了!
2026年论文写作工具红黑榜出炉!红榜优先选千笔AI、ThouPen、豆包,适配国内学术规范,内容严谨可靠;黑榜需避开低质免费工具、无真实引用平台、过度依赖全文生成的工具。选择时可参考三维模型:需求匹配度 - 数据可信度 -…...
企业级低代码平台JeecgBoot快速搭建指南:从环境配置到实战应用
企业级低代码平台JeecgBoot快速搭建指南:从环境配置到实战应用 【免费下载链接】jeecg-boot 一款 AI 驱动的低代码平台,提供"零代码"与"代码生成"双模式——零代码模式一句话搭建系统,代码生成模式自动输出前后端代码与建…...
实战应用:基于快马平台ai,开发并部署一个功能齐全的instagram内容下载web应用
今天想和大家分享一个实战项目:基于InsCode(快马)平台快速开发并部署一个功能完备的Instagram内容下载Web应用。这个项目从需求分析到上线只用了不到半天时间,特别适合想验证产品原型的开发者。 项目需求分析 首先明确核心功能需求:需要支持I…...
优化算法中的‘0.618’魔法:黄金分割法为何是工程优化的首选入门工具?
黄金分割法:从古希腊美学到现代工程优化的优雅解决方案 在工程优化领域,算法选择往往让初学者感到困惑。面对梯度下降、牛顿法等复杂方法,有一种源自公元前300年的数学比例——黄金分割比(0.618),却成为了…...
