当前位置: 首页 > news >正文

关于vue-router路径配置的问题(此文主要是记录三级路由的访问路径,以及安装、路由组件、路由重定向)

一、路由的定义

  1. node路由:用户根据不同的url地址,来访问不同的页面

  1. vue路由(客户端):组件结合路由规则来构建单页面应用

二、下载安装

npm ——>终端输入npm i vue-router@3 -S ——>回车 (@3为版本的意思)

npm i vue-router@3 -S

三、系统提供的路由组件

<router-view></router-view> //路由出口

<router-link to=""></router-link> //路由导航

四、路由的重定向

1.一级路由重定向

{path:'*',             // *:任何不存在的路径redirect:'/contact'   //重定向路径 
}   

2.二级路由重定向

{path:'/index',         // index:一级路由地址redirect:'/index/home'   //重定向路径 
}

五、基本使用

  1. 在router文件夹下的index.js文件中创建并导出路由

// 引入vue模块
import Vue from 'vue'
// 引入VueRouter模块
import VueRouter from 'vue-router'
// Vue显示注册VueRouter
Vue.use(VueRouter)/*** 创建路由对象* 接收参数是一个options: {}* 该对象中包含很多个选项: routes* 得到router对象* **/ 
const router = new VueRouter({});// 导出
export default router
  1. 在main.js中引入路由

import Vue from 'vue'
import App from './App.vue'// 引入路由
import router from '@/router'Vue.config.productionTip = false// new Vue实例选项中包含很多选项: data,methods,router(路由)
new Vue({router,render: h => h(App),
}).$mount('#app')
  1. 使用步骤:

(1)引入组件 (2)配置路由规则 (3)设置路由出口

例如:在router文件夹下的index.js文件中执行(1)(2)

// 1.引入组件
import Login from '@/pages/Login'/*** 创建路由对象* 接收参数是一个options: {}* 该对象中包含很多个选项: routes* 得到router对象* **/ 
const router = new VueRouter({// 2.设置路由规则(多个路由规则用逗号隔开)routes:[{path:'/login',//访问的路径component:Login},]
});

在APP.vue中执行(3)

<template><div><!-- 设置路由出口 --><!-- vue-router系统中提供的组件 --><router-view></router-view></div>
</template>

六、一级路由、二级路由、三级路由的访问路径

(1)一级路由。其路径为:/index

//配置路由规则
const routes=[{path:'/index',  //一级路由访问路径  ‘/index’component:Index, //Index是引入路由文件时定义的路由名称}
]

(2)二级路由:在一级路由之后使用children属性。其路径为:/index/management

(二级路由在path时不能加/)

//配置路由规则
const routes=[{path:'/index',  //一级路由访问路径  ‘/index’component:Index, //Index是引入路由文件时定义的路由名称childern:[path:'management',    //二级路由访问路径 '/index/management'component:Manageme,   //  Manageme是引入路由文件时定义的路由名称]}
]

(3)三级路由:在二级路由之后使用children属性。其路径为:/index/management/mgoodcate

//配置路由规则
const routes=[{path:'/index',  //一级路由访问路径  ‘/index’component:Index, //Index是引入路由文件时定义的路由名称childern:[path:'management',    //二级路由访问路径 '/index/management'component:Manageme,   //  Manageme是引入路由文件时定义的路由名称childern:[path:'mgoodcate',    //二级路由访问路径 '/index/management/mgoodcate'component:Mgoodcate,   //  Manageme是引入路由文件时定义的路由名称]]}
]

(我之前在网上查的时候,有人说三级路由的路径地址前不用加一级路由地址,但是我只有都加上才能访问,大家可以自行尝试)

相关文章:

关于vue-router路径配置的问题(此文主要是记录三级路由的访问路径,以及安装、路由组件、路由重定向)

一、路由的定义node路由&#xff1a;用户根据不同的url地址&#xff0c;来访问不同的页面vue路由&#xff08;客户端&#xff09;&#xff1a;组件结合路由规则来构建单页面应用二、下载安装npm ——>终端输入npm i vue-router3 -S ——>回车 &#xff08;3为版本的意思&…...

SpringBoot 整合 clickhouse和mysql 手把手教程全网最详细

最近做一个项目 需要 整合mysql clickhouse 多数据源 后台用的是ruoyi框架 1. 首先pom引入相关依赖 <!--JDBC-clickhouse数据库--><dependency><groupId>com.clickhouse</groupId><artifactId>clickhouse-jdbc</artifactId><version&…...

Leetcode-java 数据结构回顾 Day01

数据结构复习 虽说是复习&#xff0c;但是都差不多忘干净了。而且用c做题做的多。 借从Leetcode上做题的机会&#xff0c;记一记自己之前学过的java知识。 链表 数组好歹写个动态规划&#xff0c;还能对六七十个样例&#xff0c;链表是一点头绪都没&#xff0c;尤其是要写头…...

Java spring cloud 企业工程管理系统源码+项目模块功能清单

工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#xff1a;实现对数据字典标签的增删改查操作 2、编码管理&#xff1a;实现对系统编码的增删改查操作 3、用户管理&#xff1a;管理和查看用户角色 4、菜单管理&#xff1a;实现对系统菜单的增删改查操…...

用Biome-BGC模型如何模拟水循环过程

在Biome-BGC模型中&#xff0c;对于碳的生物量积累&#xff0c;采用光合酶促反应机理模型计算出每天的初级生产力(GPP)&#xff0c;将生长呼吸和维持呼吸减去后的产物分配给叶、枝条、干和根。生物体的碳每天都按一定比例以凋落方式进入凋落物碳库&#xff1b;对于水份输运过程…...

【目标检测论文解读复现NO.33】改进YOLOv5的新能源电池集流盘缺陷检测方法

前言此前出了目标改进算法专栏&#xff0c;但是对于应用于什么场景&#xff0c;需要什么改进方法对应与自己的应用场景有效果&#xff0c;并且多少改进点能发什么水平的文章&#xff0c;为解决大家的困惑&#xff0c;此系列文章旨在给大家解读最新目标检测算法论文&#xff0c;…...

二进制转换之命理学习

什么是十神 运用儒家学说&#xff1a; 克我者官也&#xff1a;古代没有民主思想&#xff0c;官不是为民服务的&#xff0c;官就是克的。 对男命来说克我的是儿女&#xff0c;女儿是正官&#xff0c;儿子是偏官&#xff08;七杀&#xff09;克的厉害&#xff0c;对父亲来说有了…...

es6 常见规范

块级作用域 &#xff08;1&#xff09;let 取代 var ES6提出了两个新的声明变量的命令&#xff1a;let和const。其中&#xff0c;let完全可以取代var&#xff0c;因为两者语义相同&#xff0c;而且let没有副作用。 use strict;if (true) {let x hello; }for (let i 0; i &…...

大学计算机基础填空题

大学计算机填空题 1、 从计算机域名到 IP地址的翻译过程称为域名解析。 2、计算机各部件传递信息的通道称为总线英文是BUS。 3、 采用 ASCII 编码时每个字符占1个字节&#xff0c;最高为是0。 4、 电子计算机的特点有&#xff1a;速度快、精度高、存储容量大、具有逻辑判断能力…...

低代码开发平台是什么意思?低代码开发平台优势!

大多数企业都在寻求尽可能地改善客户体验。因此&#xff0c;企业和开发人员正在转向低代码开发平台&#xff0c;以在没有传统方法的情况下提供有针对性的应用程序。关键是尽可能消除手动编程过程。 低代码开发平台是什么意思&#xff1f; 低代码是开发应用程序的现代方式。它…...

CSAPP - Bomb Lab

介绍&#xff1a;http://csapp.cs.cmu.edu/3e/bomblab.pdf 工具&#xff1a;gdb gdb手册&#xff1a;http://csapp.cs.cmu.edu/2e/docs/gdbnotes-x86-64.pdf phase_1 反汇编phase_1函数。 (gdb) disas phase_1 Dump of assembler code for function phase_1:0x00000000004…...

Docker 常见操作及部署springboot、Shiro、SpringData脚手架(下)

1、查找jdk容器 docker search jdk 2、查看镜像 docker images 3、启动JDK镜像 docker run -di --namejdk1.8 clarinpl/java 4、查看镜像运行情况 docker ps 5、使用命令行进入容器 docker exec -it 48428f21b6ee /bin/bash 6、查看jdk版本 java -version 7、从宿主机复制…...

【前端学习】D3:CSS进阶

文章目录前言系列文章目录1 CSS的三大特性1.1 层叠性1.2 继承性1.3 优先级&#xff08;*&#xff09;2 盒子模型2.1 看透网页布局的本质2.2 盒子模型&#xff08;Box Model&#xff09;的组成2.3 边框&#xff08;border&#xff09;2.3.1 普通边框2.3.2 表格的细线边框2.3.3 边…...

中移杭研面试经历

文章目录 mysql 事务隔离级别mongo查询数据不到,但是导出来后有这条数据,为什么呢?排查过程cms 和 g1区别使用范围不一样STW的时间垃圾碎片垃圾回收的过程不一样CMS会产生浮动垃圾,G1没有浮动垃圾G1回收器的特点大对象的处理CMS的总结和优缺点cms 回收算法STW发生在哪些阶段…...

[CV学习笔记] yolotensorrt多线程推理-第一部分

1、前言 之前分享了利用FastDet&tensorrt多线程推理的代码&#xff0c;本想着继续学习yolo&tensorrt多线程的代码&#xff0c;但是现在shouxieai直接开源的该项目&#xff0c;而且还包含yolov8实例分割的代码。因此本文主要是对项目代码进行梳理&#xff0c;一方面加深…...

element ui 的滚动条,Element UI 文档中没有被提到的滚动条

element ui 的滚动条,Element UI 文档中被提到的滚动条 Element UI 官网中有用到自定义的滚动条组件&#xff0c;但是发布的所有版本中都不曾提及&#xff0c;个中原因我们不得而知&#xff0c;不过我们还是可以拿过来引用到自己的项目中。 使用的时候&#xff0c; 放在 <el…...

项目四:使用路由交换机构建园区网-任务三:配置路由交换机并进行通信测试

配置路由交换机并通信测试1、在RS-1上创建VLAN并配置Trunk接口2、测试通信结果3、配置RS-1的三层路由接口&#xff08;SVI&#xff09;1、在RS-1上创建VLAN并配置Trunk接口 进入系统视图&#xff0c;关闭信息中心&#xff0c;重命名为RS-1 system-view undo info-center enab…...

数据仓库面试题汇总

一、分析 1&#xff0e;什么是逻辑数据映射&#xff1f;它对 ETL 项目组的作用是什么&#xff1f; 逻辑数据映射&#xff08;Logical Data Map&#xff09;用来描述源系统的数据定义、目标数据仓库的模型以及 将源系统的数据转换到数据仓库中需要做操作和处理方式的说明文档&…...

【Redis】哨兵机制(三)

目录 3.Redis哨兵 3.1.哨兵原理 3.1.1.集群结构和作用 3.1.2.集群监控原理 3.1.3.集群故障恢复原理 3.1.4.小结 3.2.搭建哨兵集群 3.3.RedisTemplate 3.3.1.导入Demo工程 3.3.2.引入依赖 3.3.3.配置Redis地址 3.3.4.配置读写分离 3.Redis哨兵 Redis提供了哨兵&am…...

好用的电脑录屏工具有哪些?电脑好用的录屏工具

现如今很多人都渐渐对录屏有了需求&#xff0c;尤其是网课老师和网络主播的从业者&#xff0c;录屏工具可以帮助他们减轻很多工作量。好用的电脑录屏工具有哪些&#xff1f; 平时在工作学习中&#xff0c;我们往往会有录制视频的需求&#xff0c;比如录制游戏视频、录制网课视频…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...