【Vue2+3入门到实战】(16)VUEVue路由的重定向、404、编程式导航、path路径跳转传参 详细代码示例

news2025/7/9 9:50:00

目录

    • 一、Vue路由-重定向
      • 1.问题
      • 2.解决方案
      • 3.语法
      • 4.代码演示
    • 二、Vue路由-404
      • 1.作用
      • 2.位置
      • 3.语法
      • 4.代码示例
    • 三、Vue路由-模式设置
      • 1.问题
      • 2.语法
    • 四、编程式导航-两种路由跳转方式
      • 1.问题
      • 2.方案
      • 3.语法
      • 4.path路径跳转语法
      • 5.代码演示 path跳转方式
      • 6.name命名路由跳转
      • 7.代码演示通过name命名路由跳转
      • 8.总结
    • 五、编程式导航-path路径跳转传参
      • 1.问题
      • 2.两种传参方式
      • 3.传参
      • 4.path路径跳转传参(query传参)
      • 5.path路径跳转传参(动态路由传参)
    • 六、编程式导航-name命名路由传参
      • 1.name 命名路由跳转传参 (query传参)
      • 2.name 命名路由跳转传参 (动态路由传参)
      • 3.总结
    • 七、面经基础版-案例效果分析
      • 1.面经效果演示
      • 2.功能分析
      • 3.实现思路分析:配置路由+功能实现

在这里插入图片描述

一、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', //默认是hash
    routes:[]
})

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

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命名路由跳转

8.总结

编程式导航有几种跳转方式?

五、编程式导航-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({
  path: '/路径/参数值'
})

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

**注意:**path不能配合params使用

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

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

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

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

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

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: {
        参数名: '参数值',
      }
    })
    

七、面经基础版-案例效果分析

1.面经效果演示

2.功能分析

  • 通过演示效果发现,主要的功能页面有两个,一个是列表页,一个是详情页,并且在列表页点击时可以跳转到详情页
  • 底部导航可以来回切换,并且切换时,只有上面的主题内容在动态渲染

在这里插入图片描述

3.实现思路分析:配置路由+功能实现

1.配置路由

  • 首页和面经详情页,两个一级路由
  • 首页内嵌套4个可切换的页面(嵌套二级路由)

2.实现功能

  • 首页请求渲染
  • 跳转传参 到 详情页,详情页动态渲染
  • 组件缓存,性能优化

在这里插入图片描述

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

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

相关文章

工程(十七)——自己数据集跑R2live

博主创建了一个科研互助群Q&#xff1a;772356582&#xff0c;欢迎大家加入讨论。 r2live是比较早的算法&#xff0c;编译过程有很多问题&#xff0c;通过以下两个博客可以解决 编译R2LIVE问题&解决方法-CSDN博客 r2live process has died 问题解决了_required process …

优化算法3D可视化

编程实现优化算法&#xff0c;并3D可视化 1. 函数3D可视化 分别画出 和 的3D图 import numpy as np from matplotlib import pyplot as plt import torch# 画出x**2 class Op(object):def __init__(self):passdef __call__(self, inputs):return self.forward(inputs)def for…

【软考】系统集成项目管理工程师【总】

引言 本来整理这篇文章的目的是方便自己23年考试用的 效果不错 目标完成。 接下来的目标是把这篇文章 做成参加该软考 小伙伴的唯一参考资料&#xff08;有它就够了&#xff09;来持续更新。。。 这篇文章我将当作一个长周期&#xff08;以年为单位&#xff09;项目运维起来&am…

【Web】vulhub-httpd apache解析漏洞复现(1)

目录 ①CVE-2017-15715 ②apache_parsing_vulnerability ①CVE-2017-15715 贴出源码&#xff1a; <?php if(isset($_FILES[file])) {$name basename($_POST[name]);$ext pathinfo($name,PATHINFO_EXTENSION);if(in_array($ext, [php, php3, php4, php5, phtml, pht]))…

linux常见基础指令

入门常见基础指令 ls、stat、 pwd 、cd、tree、 whoami、 touch、 mkdir、 rm 、 man、 cp、mv、cat、tac、echo、>、 >>、 < 、more、 less、 head、 tail、date、 cal、 find、 which、alias、whereis、grep、zip与unzip、 tar、bc、uname、xargs... 热键Tab、…

时序分解 | Matlab实现贝叶斯变化点检测与时间序列分解

时序分解 | Matlab实现贝叶斯变化点检测与时间序列分解 目录 时序分解 | Matlab实现贝叶斯变化点检测与时间序列分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现贝叶斯变化点检测与时间序列分解 1.Matlab实现贝叶斯变化点检测与时间序列分解&#xff0c;完…

STM32——通用计时器

通用计时器框图 1.时钟源 1&#xff09;内部时钟(CK_INT) 2&#xff09;外部时钟模式 1&#xff1a;外部输入引脚(TIx)&#xff0c;x1&#xff0c;2&#xff08;即只能来自于通道 1 或者通道 2&#xff09; 3&#xff09;外部时钟模式 2&#xff1a;外部触发输入(ETR) 4&#…

【面试】 Maven 的八大核心概念

Maven 的八大核心概念 在这里&#xff0c;举出这个标题&#xff0c;自然大家知道Maven是干啥的&#xff0c;就不过多进行赘述&#xff01;我们主要对于Maven的八大核心概念做一个解释补充&#xff0c;这也是我自己的一个学习历程&#xff0c;我们一起共勉&#xff01; 文章概述…

STM32实战之IAP代码升级

目录 1 IAP介绍 2 内存分区 3 整体设计流程图 4 Boot Loader的代码编写 5 APP1代码编写 6 APP2代码编写 stm32内部flash操作相关函数 1 IAP介绍 IAP&#xff08;In Application Programming&#xff09;即在应用编程&#xff0c; IAP 是用户自己的程序在运行过程中…

大创项目推荐 深度学习交通车辆流量分析 - 目标检测与跟踪 - python opencv

文章目录 0 前言1 课题背景2 实现效果3 DeepSORT车辆跟踪3.1 Deep SORT多目标跟踪算法3.2 算法流程 4 YOLOV5算法4.1 网络架构图4.2 输入端4.3 基准网络4.4 Neck网络4.5 Head输出层 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; *…

HCIA-Datacom题库(自己整理分类的)——ARP协议【完】

一、单选 1.ARP 属于哪一层协议&#xff1f; 数据链路层 网络层 物理层 传输层 2.ARP请求是____发送的 点播 广播 组播 单播 关于ARP报文的说法错误的是? ARP请求报文是广播发送的 ARP报文不能被转发到其他广播域 ARP应答报文是单播方发送的 任何链路层协议都需…

day7--java高级编程:Junit单元测试框架、泛型,集合:集合数组互转,迭代器,增强for循环,集合工具类

补充&#xff1a;Junit单元测试框架 1. 简介 概述&#xff1a; JUnit是使用Java语言实现的单元测试框架&#xff0c;它是开源的&#xff0c;Java开发者都应当学习并使用JUnit编写单元测试。此外&#xff0c;几乎所有的IDE工具都集成了JUnit&#xff0c;这样我们就可以直接在…

STM32CubeMX教程13 ADC - 单通道转换

目录 1、准备材料 2、实验目标 3、ADC概述 4、实验流程 4.0、前提知识 4.1、CubeMX相关配置 4.1.1、时钟树配置 4.1.2、外设参数配置 4.1.3、外设中断配置 4.2、生成代码 4.2.1、外设初始化调用流程 4.2.2、外设中断调用流程 4.2.3、添加其他必要代码 5、常用函数…

2023年03月18日_微软office365 copilot相关介绍

文章目录 Copilot In WordCopilot In PowerpointCopilot In ExcelCopilot In OutlookCopilot In TeamsBusiness Chat1 - copilot in word2 - copilot in excel3 - copilot in powerpoint4 - copilot in outlook5 - copilot in teams6 - business chat word 1、起草草稿 2、自动…

【LeetCode每日一题】1185.一周中的第几天(模拟+调用库函数:三种方法)

2023-12-30 文章目录 一周中的第几天方法一&#xff1a;模拟思路步骤 方法二&#xff1a;调用库函数方法三&#xff1a;调用库函数 一周中的第几天 ​ 提示&#xff1a;给出的日期一定是在 1971 到 2100 年之间的有效日期。 方法一&#xff1a;模拟 思路 1.可以根据1970年的…

Java关键字(1)

Java中的关键字是指被编程语言保留用于特定用途的单词。这些关键字不能用作变量名或标识符。以下是Java中的一些关键字&#xff1a; public&#xff1a;表示公共的&#xff0c;可以被任何类访问。 private&#xff1a;表示私有的&#xff0c;只能被定义该关键字的类访问。 cl…

用CSS中的动画效果做一个转动的表

<!DOCTYPE html> <html lang"en"><head><meta charset"utf-8"><title></title><style>*{margin:0;padding:0;} /*制作表的样式*/.clock{width: 500px;height: 500px;margin:0 auto;margin-top:100px;border-rad…

Screenshot-to-code开源项目mac上实践

github上的开源项目&#xff0c;看介绍可以将设计ui图片转换为 HTML 和 CSS 源码地址&#xff1a; GitCode - 开发者的代码家园 我的mac安装了2.7和3.11&#xff0c;就用3吧直接上代码 安装 pip3 install keras tensorflow pillow h5py jupyter 报错 ERROR: Could not in…

ubuntu22.04安装anacoda遇到的坑

这几天把用了3年的windows10换成了ubuntu22.04 各种环境都得配置&#xff0c;本文记录下遇到的坑。 1、anacoda在ubuntu上也可以用官方也提供了安装包&#xff0c;但是没有图形界面&#xff0c;需要以命令行的方式安装和运行配置 1.1 安装&#xff1a;官网下载后&#xff0c;…

tcpdump出现permission denied

在使用tcpdump -i eth0 src host 192.168.0.184 and ip and port 22 -nn -w ping.pacp命令抓包并把抓到的数据保存到ping.pacp时&#xff0c;出现了权限错误的报错。但实际上我这里用的是root用户执行的命令。 查阅man手册发现: 在tcpdump中&#xff0c;-Z选项用于在启动数据…