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

Vue路由重定向

一、Vue路由-重定向

1.问题

网页打开时, url 默认是 / 路径,如果未匹配到组件时,会出现空白

2.解决方案

重定向 → 匹配 / 后, 强制跳转 /home 路径

3.语法

{ path: 匹配路径, redirect: 重定向到的路径 },
比如:
{ path:'/' ,redirect:'/home' }

4.代码演示

const router = new VueRouter({routes: [{ path: '/', redirect: '/home'},...]
})

二、Vue路由-404

1.作用

当路径找不到匹配时,给个提示页面

2.位置

404的路由,虽然配置在任何一个位置都可以,但一般都配置在其他路由规则的最后面

3.语法

path: “*” (任意路径) – 前面不匹配就命中最后这个

import NotFind from '@/views/NotFind'const router = new VueRouter({routes: [...{ path: '*', component: NotFind } //最后一个]
})

4.代码示例

NotFound.vue

<template><div><h1>404 Not Found</h1></div>
</template><script>
export default {}
</script><style></style>

router/index.js

...
import NotFound from '@/views/NotFound'
...// 创建了一个路由对象
const router = new VueRouter({routes: [...{ path: '*', component: NotFound }]
})export default router

三、Vue路由-模式设置

1.问题

路由的路径看起来不自然, 有#,能否切成真正路径形式?

  • hash路由(默认) 例如: http://localhost:8080/#/home
  • history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持,开发环境webpack给规避掉了history模式的问题)

2.语法

const router = new VueRouter({mode:'histroy', //默认是hashroutes:[]
})

四、编程式导航-两种路由跳转方式

1.问题

点击按钮跳转如何实现?

在这里插入图片描述

2.方案

编程式导航:用JS代码来进行跳转

3.语法

两种语法:

  • path 路径跳转 (简易方便)
  • name 命名路由跳转 (适合 path 路径长的场景)

4.path路径跳转语法

特点:简易方便

//简单写法
this.$router.push('路由路径')//完整写法
this.$router.push({path: '路由路径'
})

5.代码演示 path跳转方式

6.name命名路由跳转

特点:适合 path 路径长的场景

语法:

  • 路由规则,必须配置name配置项

    { name: '路由名', path: '/path/xxx', component: XXX },
    
  • 通过name来进行跳转

    this.$router.push({name: '路由名'
    })
    

7.代码演示通过name命名路由跳转

五、编程式导航-path路径跳转传参

1.问题

点击搜索按钮,跳转需要把文本框中输入的内容传到下一个页面如何实现?
在这里插入图片描述

2.两种传参方式

1.查询参数

2.动态路由传参

3.传参

两种跳转方式,对于两种传参方式都支持:

① path 路径跳转传参

② name 命名路由跳转传参

4.path路径跳转传参(query传参)

//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
//完整写法
this.$router.push({path: '/路径',query: {参数名1: '参数值1',参数名2: '参数值2'}
})

接受参数的方式依然是:$route.query.参数名

5.path路径跳转传参(动态路由传参)

//简单写法
this.$router.push('/路径/参数值')
如:this.$router.push(`/search/${this.searchword}`)
//完整写法
this.$router.push({path: '/路径/参数值'
})

index.js

routes: [{ path: '/search/:word?', component: Search }]

接受参数的方式依然是:$route.params.参数值, 如: $route.params.searchword

六、编程式导航-name命名路由传参

1.name 命名路由跳转传参 (query传参)

this.$router.push({name: '路由名字',query: {参数名1: '参数值1',参数名2: '参数值2'}
})

2.name 命名路由跳转传参 (动态路由传参)

this.$router.push({name: '路由名字',params: {参数名: '参数值',}
})

注意: path不能配合params使用,所以在index.js中路由的配置也需要有name

3.总结

编程式导航,如何跳转传参?

1.path路径跳转

  • query传参

    this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
    this.$router.push({path: '/路径',query: {参数名1: '参数值1',参数名2: '参数值2'}
    })
    
  • 动态路由传参

    this.$router.push('/路径/参数值')
    this.$router.push({path: '/路径/参数值'
    })
    

2.name命名路由跳转

  • query传参

    this.$router.push({name: '路由名字',query: {参数名1: '参数值1',参数名2: '参数值2'}
    })
    
  • 动态路由传参 (需要配动态路由)

    this.$router.push({name: '路由名字',params: {参数名: '参数值',}
    })
    

相关文章:

Vue路由重定向

一、Vue路由-重定向 1.问题 网页打开时&#xff0c; url 默认是 / 路径&#xff0c;如果未匹配到组件时&#xff0c;会出现空白 2.解决方案 重定向 → 匹配 / 后, 强制跳转 /home 路径 3.语法 { path: 匹配路径, redirect: 重定向到的路径 }, 比如&#xff1a; { path:/ …...

MTK_ISP模块调试总结

目录 一、多帧丢帧确认 二、4G平台高ISO黑白噪去除 三、PD补偿确认 四、5G平台CA-LTM修改 五、四角偏暗case 六、ISO档位不匹配 七、5G平台多帧参数不生效 八、验证ISP通道参数生效方法...

Kotlin基本语法

以下内容摘自郭霖《第一行代码》第三版 文章目录 Kotlin变量Kotlin循环语句Kotlin条件语句Kotlin继承Kotlin主构造函数与次构造函数Kotlin实现Kotlin函数的可见性修饰符Kotlin data关键字Kotlin单例模式Kotlin List集合Kotlin Set集合Kotlin Map映射Kotlin Lamda表达式Kotlin …...

macos端串口调试推荐 serial直装激活 for mac

serial for mac版软件特色 1.准备好macOS High Sierra 最近的升级是否会让您的设备落后&#xff1f;Serial将使其恢复正常工作&#xff0c;同时保持Mac的安全功能完好无损。 2.完美无瑕的仿真 Serial是一个全功能的终端仿真器&#xff0c;支持Xterm&#xff0c;VT102和ANSI…...

MapReduce WordCount程序实践(IDEA版)

环境 Linux&#xff1a;Hadoop2.x Windows&#xff1a;jdk1.8、Maven3、IDEA2021 步骤 编程分析 编程分析包括&#xff1a; 1.数据过程分析&#xff1a;数据从输入到输出的过程分析。 2.数据类型分析&#xff1a;Map的输入输出类型&#xff0c;Reduce的输入输出类型&#x…...

go程序获取工作目录及可执行程序存放目录的方法-linux

简介 工作目录 通常就是指用户启动应用程序时&#xff0c;用户当时所在的文件夹的绝对路径。 如&#xff1a;root用户登录到linux系统后&#xff0c;一顿cd&#xff08;change directory&#xff09;后, 到了/tmp文件夹下。此时&#xff0c;用户要启动某个应用程序&#xff0…...

数据中台之数据建模工程实操

目录 理论部分 工程实操 生成表结构 UI界面建表 DDL建表语句 ​编辑 Excel导入建表...

三国志14信息查询小程序(历史武将信息一览)制作更新过程06-复现小程序

0&#xff0c;所需文件 所需全部文件下载 文件总览&#xff1a; 代码&#xff1a; 数据库&#xff1a; 1&#xff0c;前期准备 假定你已经看过前面的文章&#xff0c;并完成了下列准备&#xff1a; &#xff08;1&#xff09;一台有公网IP的云服务器&#xff0c;服务器上…...

《研发效能(DevOps)工程师》课程简介(五)丨IDCF

由国家工业和信息化部教育与考试中心颁发的职业技术证书&#xff0c;也是国内首个研发效能&#xff08;DevOps&#xff09;职业技术认证&#xff0c;内涵1000页学习教材2000分钟的课程内容讲解460多个技术知识点300多道练习题。 在这里&#xff0c;你不仅可以了解到华为、微软、…...

Jupyter Notebook快速上手

Jupyter Notebook快速上手 文章目录 Jupyter Notebook快速上手1 运行Jupyter Notebook1.1 通过图形化界面打开1.2 通过命令行打开1.3 在指定项目目录下打开 2 Jupyter Notebook运行后无法自动打开网页3 Jupyter Notebook运行代码没反应4 退出4.1 终端退出4.2 命令行退出 此教程…...

三款软件录制电脑屏幕视频

在这个视频信息快速发展的新时代&#xff0c;寻找好用的可以录制电脑屏幕视频的软件变得极其重要&#xff0c;因为制作视频已成为我们生活工作中不可或缺的一部分。 这些好用的录屏软件允许你录制摄像头、特定窗口、部分区域或整个桌面&#xff0c;同时还可对录制中的视频进行…...

react fiber架构【详细讲解,看这一篇就够了】

文章目录 前言什么是fiber架构React Fiber的运行流程Fiber关键特性在没有fiber架构之前的react是什么样子的&#xff1f;Fiber解决问题的核心&#xff1f;后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;react.js &#x1f431;‍&#…...

竞赛 深度学习疲劳检测 驾驶行为检测 - python opencv cnn

文章目录 0 前言1 课题背景2 相关技术2.1 Dlib人脸识别库2.2 疲劳检测算法2.3 YOLOV5算法 3 效果展示3.1 眨眼3.2 打哈欠3.3 使用手机检测3.4 抽烟检测3.5 喝水检测 4 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习加…...

国风数字人:数字时代的传统戏剧文化代言人

国风数字人不是简单搬运中国元素&#xff0c;而是创新优秀传统文化&#xff0c;结合现代元素&#xff0c;富含艺术性、趣味性、科技感&#xff0c;利用数字人的形式将国风文化“活”起来。 数字人翎Ling登上国风少年创演节目&#xff0c;演绎梅派京剧经典《天女散花》&#xff…...

腾讯广告RACE曝光归因模型

今天我们以腾讯广告RACE曝光归因模型为例&#xff08;以下简称RACE模型&#xff09;&#xff0c;来聊聊行业在衡量广告效果上的努力与成效。 第一类&#xff1a;衡量转化以及转化过程的归因 如同前面所讲&#xff0c;如果只是衡量ROI&#xff0c;对广告投放的效果衡量就只有一…...

使用python将word转pdf

平常想将word转pdf&#xff0c;只能使用办公工具&#xff0c;但是这些工具还收费&#xff0c;真实太犊子了&#xff0c;净想着平民手里的三瓜俩枣了。今天发现用python 可以将word转pdf,很好用特别记录下、可以直接调用 # -*- coding: utf-8 -*- # Time : 2023/11/7 9:42 # …...

Python装饰器的艺术

文章目录 装饰器基础示例代码:执行结果:参数化装饰器示例代码:执行结果:类装饰器示例代码:执行结果:装饰器的堆栈示例代码:执行结果:在Python中,装饰器是一种非常强大的特性,允许开发人员以一种干净、可读性强的方式修改或增强函数和方法。以下是一个关于Python装饰器…...

[答疑]校长出轨主任流程的业务建模

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 艳阳天 2023-10-27 19:45 我有点迷糊。校长出轨主任在酒店被拍到&#xff0c;不属于学校的业务流程&#xff0c;但闹出这种事对学校有很大影响。如果学校想用一个系统抓风纪&#xff…...

【网络管理——操作系统与安全】

文章目录 一、安装WindowsServer操作系统1、新建虚拟机2、进入Windows虚拟机进行相关配置 二、Windows用户账户管理与配置1、创建用户账户2、创建用户组 三、Windows操作系统的本地安全策略设置1、配置用户账户密码策略2、配置用户账户锁定策略3、配置组策略安全选项4、配置审核…...

62、使用python进行rk3588开发板进行推流亚马逊云服务上,进行实时播放

基本思想:之前写了一套c++的推理和视频编解码,使用rk3588的mpp硬件进行编码和解码,然后使用RTSPServer进行推流,总是有问题,虽然可以使用ffplay和vlc进行拉取和播放,但是就是无法使用gstreamer推流到亚马逊云服务上,因为项目需求的紧急,所以先用python把流程跑同,后续…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...