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

目录

    • 一、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', //默认是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命名路由跳转

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.mzph.cn/news/586593.shtml

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

相关文章

2023十大编程语言及未来展望

2023十大编程语言及未来展望 1. 2023年十大编程语言排行榜2. 十大编程语言未来展望PythonCCJavaC#JavaScriptPHPVisual BasicSQLAssembly language 1. 2023年十大编程语言排行榜 TIOBE排行榜是根据互联网上有经验的程序员、课程和第三方厂商的数量&#xff0c;并使用搜索引擎&a…

阿里云PolarDB数据库优惠价格表11元一天起

阿里云数据库PolarDB租用价格表&#xff0c;云数据库PolarDB MySQL版2核4GB&#xff08;通用&#xff09;、2个节点、60 GB存储空间55元5天&#xff0c;云数据库 PolarDB 分布式版标准版2核16G&#xff08;通用&#xff09;57.6元3天&#xff0c;阿里云百科aliyunbaike.com分享…

ansible管理windows测试

一、环境介绍 Ansible管理主机&#xff1a; 系统: redhat7.6 Linux管理服务器需安装pywinrm插件 Windows客户端主机&#xff1a; 系统: Server2012R2 Windows机器需要安装或升级powershell4.0以上版本&#xff0c;Server2008R2默认的版本是2.0&#xff0c;因此必须升…

使用flutter开发windows桌面软件读取ACR22U设备的nfc卡片id,5分钟搞定demo

最近有个需求&#xff0c;要使用acr122u读卡器插入电脑usb口&#xff0c;然后读取nfc卡片的id&#xff0c;并和用户账号绑定&#xff0c;调研了很多方式&#xff0c;之前使用rust实现过一次&#xff0c;还有go实现过一次&#xff0c;然后使用electron的时候遇到安装pcsc-lite失…

MacBook查看本机IP

嘚吧嘚 其实这也不是什么困难的问题&#xff0c;但是今年刚刚入坑Mac&#xff0c;外加用的频率不是很高&#xff0c;每次使用的时候都查&#xff0c;用完就忘&#xff0c;下次用的时候再查&#x1f92e;。真的把自己恶心坏了&#x1f648;。 所以写篇文章记录一下&#x1f92…

[C++] : 贪心算法专题(第一部分)

1.柠檬水找零&#xff1a; 1.思路一&#xff1a; 柠檬水找零 class Solution { public:bool lemonadeChange(vector<int>& bills) {int file0;int ten 0;for(auto num:bills){if(num 5) file;else if(num 10){if(file > 0)file--,ten;elsereturn false;}else{i…

产品经理学习-策略产品指标

目录&#xff1a; 数据指标概述 通用指标介绍 Web端常用指标 移动端常用指标 如何选择一个合适的数据指标 数据指标概述 指标是衡量目标的一个参数&#xff0c;指一项活动中预期达到的指标、目标等&#xff0c;一般用数据表示&#xff0c;因此又称为数据指标&#xff1b;…

Flask笔记

一&#xff1a;模板渲染 一般的话都序列化成字符串 二&#xff1a;项目拆分 2.1 项目拆分 app.py init.py views.py models.py 模型数据 2.2 蓝图 三&#xff1a;路由参数 3.1 String 重点 3.2 int 3.3 path 3.4 UUID 3.5 any 四&#xff1a;请求方式 五&#xff1a;Requ…

苹果CMS超级播放器专业版无授权全开源,附带安装教程

源码介绍 超级播放器专业版v1.0.8&#xff0c;内置六大主流播放器&#xff0c;支持各种格式的视频播放&#xff0c;支持主要功能在每一个播放器内核中都相同效果。 搭建教程 1.不兼容IE浏览器 2.php版本推荐7.4 支持7.1~7.4 3.框架引入不支持同时引入多个播放器 json对接教…

新版 macos下安装python 2.7 python 3.x多版本简单方法 pyenv python多版本管理工具

在新版本的macos中已经将默认的python升级成了3.x , 今天介绍一个简单的方法在新版本的macos中快速安装 python 2.7的方法, 就是使用brew安装python版本管理工具 pyenv来安装python2.7 # 安装pyenv版本管理工具 brew install pyenv # 安装python2.7 可以安装多个版本的ptyhon…

C#进阶-IIS应用程序池崩溃的解决方案

IIS是微软开发的Web服务器软件&#xff0c;被广泛用于Windows平台上的网站托管。在使用IIS过程中&#xff0c;可能会遇到应用程序池崩溃的问题&#xff0c;原因可能有很多&#xff0c;包括代码错误、资源不足、进程冲突等。本文将为大家介绍IIS应用程序池崩溃的问题分析和解决方…

【计算机毕业设计】python+django数码电子论坛系统设计与实现

本系统主要包括管理员和用户两个角色组成&#xff1b;主要包括&#xff1a;首页、个人中心、用户管理、分类管理、数码板块管理、数码评价管理、数码论坛管理、畅聊板块管理、系统管理等功能的管理系统。 后端&#xff1a;pythondjango 前端&#xff1a;vue.jselementui 框架&a…

MySQL数据库的安装与环境配置

下载 下载MySQL8 安装 解压 配置MySQL环境变量 系统环境变量path D:\ProgramFiles\mysql-8.0.20-winx64\bin 1.点击属性 2.点击高级系统设置 3.点击环境变量 4.在系统变量中找到path 注意这里不是用户变量 5.新建后输入解压的地址 MySQL初始化和启动 以管理员身份运行cmd…

汽车制造厂批量使用成华制造弹簧平衡器

数年来&#xff0c;成华制造都在不断的向各行各界输出着自己的起重设备&#xff0c;与众多企业达成合作&#xff0c;不断供应优质产品。近些年&#xff0c;成华制造以其卓越的产品质量和高效的生产能力&#xff0c;成功实现了弹簧平衡器的大规模批量供应&#xff0c;为重庆数家…

STM32F407ZGT6定时器(学习笔记一)

定时器STM32非常重要的外设&#xff0c;也是比较复杂的外设&#xff0c;下面以STM32F407ZGT6为例记录学习内容&#xff1a;&#xff08;1&#xff09;基本定时功能&#xff0c;&#xff08;2&#xff09;PWM输出功能&#xff0c;&#xff08;3&#xff09;PWM互补死区、多通道移…

代数结构与图论

文章目录 图的基本概念欧拉图与哈密顿图树平面图代数系统群与环格与布尔代数 图的基本概念 图的阶&#xff1a;图中的顶点数 &#xff0c;n 个顶点被称为 n 阶图零图&#xff1a;一条边都没有 平凡图&#xff1a;一阶零图基图&#xff1a;将有向图的各条有向边改成无向边所得到…

javascript 常见事件

简介&#xff1a; JavaScript&#xff08;简称“JS”&#xff09;是一种具有函数优先的轻量级&#xff0c;解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名&#xff0c;但是它也被用到了很多非浏览器环境中&#xff0c;JavaScript基于原型编程、多范式…

python+django超市进销存仓库管理系统s5264

本次设计任务是要设计一个超市进销存系统&#xff0c;通过这个系统能够满足超市进销存系统的管理及员工的超市进销存管理功能。系统的主要功能包括&#xff1a;首页、个人中心、员工管理、客户管理、供应商管理、承运商管理、仓库信息管理、商品类别管理、由管理员和员工&#…

C. Load Balancing 一个序列同时加一个数和减一个数,直到最大和最小之间相差最大为1(结论可记住)

题目&#xff1a; https://atcoder.jp/contests/abc313/tasks/abc313_c 思想&#xff1a;1.给定一个固定的B&#xff0c;求使A等于B所需的最小运算次数 2.在所有最大值和最小值最多相差1的B中&#xff0c;找出一个所需的运算次数最少的&#xff0c;即1 做法&#xff1a;构造…

python dash call_back 多output 7

效果 代码 # 导入Dash库及其相关组件&#xff0c;用于构建交互式Web应用 from dash import Dash, dcc, html, Input, Output, callback# 定义一个外部样式表&#xff0c;用于美化应用界面 external_stylesheets [https://codepen.io/chriddyp/pen/bWLwgP.css]# 创建一个D…