Vue路由讲解-05

    这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(single page application单页应用)的路径管理器。再通俗的说,vue-router就是WebApp的链接路径管理系统。

         vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。

    (vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转)

     如果想要使用我们vue的router需要在脚手架输入我们的命令引入,前面我们已经讲了基本使用,今天给大家讲解的是 如果通过router来传参,以及嵌套路由,编程式导航

   路由的两种传参方式

        1、query

           query 用于将请求参数放在 URL 中传递。它将请求参数作为键值对,用 “?” 符号分隔,放在 URL 的查询字符串中。query有点像ajax中的get请求,例如,GET 请求中通过 query 传递参数的方法如下:

   那需要如何实现路由跳转的时候进行参数的传递呢?

    首先我们需要定义一个 跳转的路由,router-link用来跳转路由,而我们跳转路由的方式没有变,只是添加了一点内容

    我们定义了一个跳转路由,path代表要跳转的路径,然后带上我们的query,用于传入我们的数据,以key:value的方式传递

<router-link :to="{path:'/about',query:{ name:'niuer' }}">About</router-link>

    我们跳转到 /about的页面肯定是需要接收内容的,这里只需要记住,怎么传就怎么接就可以

  $route是路由的实体,通过query传我们通过query接收就可以了

  {{$route.query.name}}

       

        2、params

         记住一点: query传参是可以通过 path 和 name 来指定要跳转的路由,而我们的params只能通过name来指定要跳转的路由

         如果query传参像是get请求的话,我们的params就像是post请求一样,他的原理是使用了占位符,在路径后占了几位用来传参

        params传参是必须要使用name来指定跳转的路由,要不后面是不会生效的

<router-link :to="{name:'main',params:{ name:'niuer' }}">Home</router-link>

我们还需要给main这个路由的路径定义一个占位符,代表我们这个路径后面需要传一个name属性

 

 还是那句话,怎么传的就怎么取

 

   编程式路由导航

    编程式路由导航是什么呢? 编程式路由导航就是我们可以根据一些判断条件再让他去跳转路由.比如登录成功,密码正确,才可以跳转,那不就是给按钮一个点击事件,然后通过点击按钮判断是否正确,才跳转路由,

    这里我们使用element-plus拿一个登录页面,这里不讲解使用,只需要编写登录按钮,来进行路由导航即可

<!-- src/components/Login.vue -->
<template><div class="login-container"><el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="80px"><el-form-item label="用户名" prop="username"><el-input v-model="loginForm.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="loginForm.password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('loginForm')">登录</el-button><el-button @click="resetForm('loginForm')">重置</el-button></el-form-item></el-form></div>
</template><script>
export default {data() {return {loginForm: {username: '',password: ''},rules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {// 提交表单逻辑,这里可以调用API等操作console.log('submit!');} else {console.log('error submit!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}
};
</script><style scoped>
.login-container {width: 300px;margin: 100px auto;
}
</style>

  我们如果要在登录成功的方法内写跳转路由,找到提交按钮的点击事件,我们可以看到有一个打印的是 submit代表提交成功,我们在这里编写我们的路由导航

  this.$router也是我们的路由对象,push是我们的一个方法,他可以返回到浏览器的上一页, 里面的内容是和我们使用标签的写法是一样的   

 我们的push是代表我们点击之后,可以回退到登录页面,可以有历史记录的,而我们的还有一个方法是没有历史记录 replace方法

嵌套路由

       Vue的嵌套路由是指在Vue.js应用中,通过Vue Router实现的一个特性,允许在已被定义为路由的一个组件内部再次定义子路由。这意味着你可以在一个父路由所对应的组件内加载子组件,从而展示具有层级关系的内容。这种方式有利于构建具有复杂导航结构的单页应用(SPA),让URL能够反映应用的多级界面结构,同时保持用户界面的连贯性和导航的便捷性。

               具体实现上,你可以在Vue Router的配置中为某个路由添加一个children属性,该属性是一个数组,数组中的每个对象都是一个子路由配置。每个子路由都会对应一个组件,这些组件会显示在父路由组件中用<router-view>标记的位置。当访问相应的子路由URL时,对应的子组件就会在这个<router-view>位置被渲染出来,而父组件仍然保持不变,实现了页面部分区域的动态替换。

    我们来完成一个当登录成功的时候,进入主页面,点击一个菜单,只有一块发生变化

   这里是我们主页面的一个布局

<template><div class="common-layout"><el-container><el-aside width="200px"><el-menu :default-openeds="['1', '3']"><el-sub-menu index="1"><template #title><el-icon><message /></el-icon>Navigator One</template><el-menu-item-group><template #title>Group 1</template><el-menu-item index="1-1">Option 1</el-menu-item><el-menu-item index="1-2">Option 2</el-menu-item></el-menu-item-group></el-sub-menu></el-menu></el-aside><el-main>主页</el-main></el-container></div></template><script>
</script><style>
</style>

当我们点击Option 1的时候,要展示到我们的另一个组件的内容,当然这里我们需要有一个router-view的 用来展示我们的数据

这里我们开启一下路由,让我们的导航栏支持路由 :router=true,我们的index写我们点击option 1的时候跳转到/stu这个页面,router-view是用来展示组件的, 

但我们发现点击之后,突然整个页面都变化了,当你点击的时候,他会将整个页面都换成 /stu这个指向的组件,我们需要把他定义成主页面路由的一个子路由,比主页面的路由小一级,现在他们是同级的

 效果

 

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

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

相关文章

免费 逼真:快手“可灵”后又一Sora级选手登场

就在今日&#xff0c;英伟达投资的旧金山初创公司 Luma AI 打出一手王牌&#xff0c;推出新一代 AI 视频生成模型 Dream Machine&#xff0c;可以文生视频&#xff0c;图生视频&#xff0c;人人免费可用。同时&#xff0c;Luma AI 称 Dream Machine 可以从文本和图像生成“高质…

什么品牌洗地机性价比高?四大出色的王牌机型力荐

科技的发展让咱们的生活变得更加便捷&#xff0c;很多智能清洁家电的出现&#xff0c;例如洗地机&#xff0c;集合了扫地、吸尘、拖地、除菌的功能&#xff0c;帮助了我们高效地完成了家务活&#xff0c;给我们腾出了更多享受生活的时间。但&#xff0c;相信有不少的新手朋友们…

python脚本-工作日、休息日查询YYYY-MM-DD(万年历版)

注释都有&#xff0c;看代码 # codingutf-8 import json, requests reopen_nos 3 #全局参数&#xff1a;默认函数失败重试次数class WhTime:def work_time(self,data_time,reopen_noreopen_nos): #日期格式YYYY-MM-DD,传2024-5-3和2024-05-03均兼容for ii in range(reopen_no…

XSKY 在金融行业:新一代分布式核心信创存储解决方案

近日&#xff0c;国家金融监督管理总局印发了《关于银行业保险业做好金融“五篇大文章”的指导意见》&#xff0c;在数字金融领域提出明确目标&#xff0c;要求银行业保险业数字化转型成效明显&#xff0c;数字化经营管理体系基本建成&#xff0c;数字化服务广泛普及&#xff0…

怎样增强 CLike 游戏的社交功能,促进玩家之间的互动和交流?

要增强CLike游戏的社交功能&#xff0c;以促进玩家之间的互动和交流&#xff0c;可以考虑以下几个方面&#xff1a; 添加聊天功能&#xff1a;在游戏中加入实时聊天功能&#xff0c;让玩家可以在游戏内互相交流。可以通过文本聊天或者语音聊天来实现。 社交平台集成&#xff1…

开源模型应用落地-音乐生成模型-suno/bark深度使用-AIGC应用探索(六)

一、前言 学习音乐生成模型具有极其重要的价值。通过对音乐生成模型的深入学习,我们能够探索到音乐创作的全新边界和可能性。它不仅可以开启一扇通往无限音乐创意的大门,让我们领略到科技与艺术完美融合所带来的震撼与惊喜,还能帮助我们在音乐领域实现前所未有的突破和创新。…

层归一化和残差连接

层归一化和残差连接是深度学习中两种重要的技术&#xff0c;它们分别在不同方面对神经网络的性能有显著提升。以下是关于这两种技术的详细解释&#xff1a; 层归一化&#xff08; L a y e r N o r m a l i z a t i o n Layer Normalization LayerNormalization&#xff09; 1…

SaaS案例分享:成功构建销售渠道的实战经验

面对SaaS产品推广的难题&#xff0c;你是否曾感到迷茫&#xff0c;不知如何选择有效的销售渠道&#xff1f;Shopify独立站联盟营销或许能为你提供新的思路。Shopify作为领先的电商解决方案提供商&#xff0c;其独立站功能为众多商家提供了强大的在线销售平台。而联盟营销&#…

MySQL用户权限管理详解

MySQL 用户管理权限非常详细且灵活&#xff0c;允许管理员精确控制不同用户对数据库的访问和操作能力。权限系统基于权限层级和具体操作类型来设计。以下是一些核心概念和权限详解&#xff1a; 权限层级 全局级权限&#xff1a;影响整个MySQL服务器&#xff0c;例如CREATE US…

数据库的增删改查操作语句及一些常用的进阶语句

在关系数据库管理系统&#xff08;RDBMS&#xff09;中&#xff0c;增删改查&#xff08;CRUD&#xff09;操作是最基本的数据库操作。以下是这些操作的详细介绍以及其他常用的数据库操作语句。 增&#xff08;Create/Insert&#xff09; 1. 创建数据库 创建一个新的数据库。…

lua手动添加Opencv Mat对象

错误写法 在lua的userdata中分配内存 使用c的placement new 调用 Mat 类的构造函数&#xff0c;把对象分配在lua的userdata空间中 Mat的生命周期由lua虚拟机管理&#xff0c;跟随lua变量生命周期 void createMat(const std::string& filename,Mat *result) {Mat img c…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 生成哈夫曼树(100分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 📎在线评测链接 生成哈夫曼树(100分) 🌍 评测功能需要订阅专栏后私信联系清…

如何应对缺失值带来的分布变化?探索填充缺失值的最佳插补算法

本文将探讨了缺失值插补的不同方法&#xff0c;并比较了它们在复原数据真实分布方面的效果&#xff0c;处理插补是一个不确定性的问题&#xff0c;尤其是在样本量较小或数据复杂性高时的挑战&#xff0c;应选择能够适应数据分布变化并准确插补缺失值的方法。 我们假设存在一个…

506.相对名次

给你一个长度为 n 的整数数组 score &#xff0c;其中 score[i] 是第 i 位运动员在比赛中的得分。所有得分都 互不相同 。 运动员将根据得分 决定名次 &#xff0c;其中名次第 1 的运动员得分最高&#xff0c;名次第 2 的运动员得分第 2 高&#xff0c;依此类推。运动员的名次…

【Java】已解决:Java.lang.OutOfMemoryError: GC overhead limit exceeded

文章目录 问题背景可能出错的原因错误代码示例正确代码示例注意事项 问题背景 java.lang.OutOfMemoryError: GC overhead limit exceeded 是Java虚拟机&#xff08;JVM&#xff09;在运行时遇到的一种内存溢出错误。这种错误通常发生在应用程序的堆内存&#xff08;Heap Memor…

c++ namespace详解

在C中&#xff0c;命名空间&#xff08;namespace&#xff09;是一种用于组织代码的机制&#xff0c;能够避免命名冲突。通过命名空间&#xff0c;可以将相关的类、函数、变量等组织在一起&#xff0c;使代码更具结构性和可读性。 使用命名空间 定义命名空间 你可以使用关键字…

香港Web3时代:比特币可以成为「收益性资产」吗?

原文标题&#xff1a;《CAN BITCOIN BE A PRODUCTIVE ASSET?》撰文&#xff1a;Pascal Hgli编译&#xff1a;Chris&#xff0c;Techub News本文来源香港Web3媒体 Techub News 比特币正在经历一场大的变化&#xff0c;人们对其性质有不同的看法。有些人将其视为日常交易的货币…

数据结构试题 16-17

先这样吧&#xff0c;&#xff0c;专业课不是统考&#xff0c;我发现每年的卷子风格都不太一样&#xff0c;侧重点也不一样。以及21的和16的发生了很大的改变。等明年1月再看看吧 那就先over啦 数据结构撒花&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&am…

基于single flight来解决缓存击穿

目录 1. 缓存击穿2. 常见解决方案3.single flight方式3.1 模拟业务场景3.2 使用single flight的方式 缓存雪崩、缓存击穿、缓存穿透不单单是缓存领域的经典场景&#xff0c;更是面试当牛马时必备&#xff08;背&#xff09;八股文。 我们来讨论下缓存击穿场景下的解决方案。 …

【AI开发】RAG基础

RAG的基本流程&#xff1a; 用一个loader把knowledge base里的知识做成一个个的document&#xff0c;然后把document切分成snippets&#xff0c;把snippets通过embedding&#xff08;比如openai的embedding模型或者huggingface的&#xff09;向量化&#xff0c;存储到vectordb…