前端Vue入门-day06-路由进阶

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

目录

路由的封装抽离

声明式导航

导航链接 

两个类名 

自定义高亮类名 

跳转传参

1. 查询参数传参

2. 动态路由传参

两种传参方式的区别 

Vue路由 

重定向

404

编程式导航

基本跳转

路由传参 

① path 路径跳转传参 

② name 命名路由跳转传参 


 

路由的封装抽离

问题:所有的路由配置都堆在main.js中合适么?
目标:将路由模块抽离出来。 好处: 拆分模块,利于维护

绝对路径:@指代src目录,可以用于快速引入组件

import Find from '@/views/Find'
import My from '@/views/My'
import Friend from '@/views/Friend'import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router = new VueRouter({// routes 路由规则们// route  一条路由规则 { path: 路径, component: 组件 }routes: [{ path: '/find', component: Find },{ path: '/my', component: My },{ path: '/friend', component: Friend },]
})export default router

声明式导航

导航链接 

需求:实现导航高亮效果  
vue-router 提供了一个全局组件 router-link (取代 a 标签)
① 能跳转 ,配置 to 属性指定路径( 必须 ) 。 本质还是 a 标签 , to 无需 #
② 能高亮, 默认就会提供 高亮类名 ,可以直接设置高亮样式

两个类名 

说明:我们发现 router-link 自动给当前导航添加了 两个高亮类名
① router-link-active 模糊匹配 (用的多)
        to="/my" 可以匹配 /my /my/a /my/b ....
② router-link-exact-active 精确匹配
        to="/my" 仅可以匹配 /my

自定义高亮类名 

说明:router-link 的 两个高亮类名 太长了,我们希望能定制怎么办?  

跳转传参

目标:在跳转路由时, 进行传值
1. 查询参数传参
2. 动态路由传参

1. 查询参数传参

① 语法格式如下
        to="/path ?参数名=值 "
② 对应页面组件接收传递过来的值
        $route. query.参数名
<router-link to="/search?key=小周不摆烂">小周不摆烂</router-link>
<script>
export default {name: 'MyFriend',created () {// 在created中,获取路由参数// this.$route.query.参数名 获取console.log(this.$route.query.key);}
}
</script>

2. 动态路由传参

① 配置动态路由
② 配置导航链接
        to="/path /参数值 "
③ 对应页面组件接收传递过来的值
        $route. params.参数名

两种传参方式的区别 

1. 查询参数传参 (比较适合传 多个参数 )
        ① 跳转:to="/path ?参数名=值&参数名2=值 "
        ② 获取:$route.query.参数名
2. 动态路由传参 ( 优雅简洁 ,传单个参数比较方便)
        ① 配置动态路由:path: "/path/参数名"
        ② 跳转:to="/path /参数值 "
        ③ 获取:$route.params.参数名

Vue路由 

重定向

问题: 网页打开, url 默认是 / 路径,未匹配到组件时,会出现空白
说明: 重定向 → 匹配path后, 强制跳转path路径
语法: { path: 匹配路径, redirect: 重定向到的路径 },
// 创建了一个路由对象
const router = new VueRouter({routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ path: '/search/:words?', component: Search }]
})

404

作用: 当路径找不到匹配时,给个提示页面
位置: 配在路由最后
语法:path: "*" (任意路径) – 前面不匹配就命中最后这个

 

编程式导航

基本跳转

问题:点击按钮跳转如何实现?
编程式导航:用JS代码来进行跳转
两种语法:
        ① path 路径跳转 (简易方便)
        ② name 命名路由跳转

路由传参 

两种传参方式:查询参数 + 动态路由传参
两种跳转方式,对于两种传参方式都支持:
① path 路径跳转传参
② name 命名路由跳转传参

① path 路径跳转传参 

query传参

动态路由传参

 

② name 命名路由跳转传参 

 query传参

 动态路由传参

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

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

相关文章

opencv基础函数使用

文章目录 前言一、Mat类二、Vec3b三、Scalar函数四、imread函数五、imshow函数六、imwrite函数总结前言 本篇文章带大家来学习一下opencv基础函数的使用。 一、Mat类 Mat类是OpenCV中最常用的数据结构之一,用于表示和操作图像和矩阵数据。它提供了一个多维数组,用于存储像…

Socket 前端项目结构搭建

npm install socket.io-client --savenpm install element-plus --savenpm install vue-router4.0.12 --save简单的页面搭建 聊天系统登录前端实现 登录模板 <template><div class"login-container"><el-form ref"form" :model"fo…

IDEA快捷键大全

编辑与导航快捷键&#xff1a; Ctrl S: 保存当前文件Ctrl Z: 撤销Ctrl Y: 重做&#xff08;Redo&#xff09;Ctrl X: 剪切Ctrl C: 复制Ctrl V: 粘贴Ctrl D: 复制当前行或选定的区域Ctrl Delete: 删除光标后的单词Ctrl Backspace: 删除光标前的单词Ctrl Shift 上箭头…

使用 OpenCV 和深度学习对黑白图像进行着色

在本文中,我们将创建一个程序将黑白图像(即灰度图像)转换为彩色图像。我们将为此程序使用 Caffe 着色模型。您应该熟悉基本的 OpenCV 功能和用法,例如读取图像或如何使用 dnn 模块加载预训练模型等。现在让我们讨论实现该程序所遵循的过程。 给定一张灰度照片作为输入,本文…

Maven 打包项目后,接口识别中文乱码

背景 项目在Idea里面运行&#xff0c;调用接口发送中文消息正常&#xff0c;用Maven打包项目后&#xff0c;运行jar包&#xff0c;调用接口发送中文出现乱码。 解决方法 1.Idea编译配置 2.如果更改了上述配置之后还是没有效果&#xff0c;则在运行jar包的前面加上 -Dfile.en…

100天精通Python(可视化篇)——第96天:Pyecharts绘制多种炫酷箱形图参数说明+代码实战

文章目录 专栏导读1. 箱形图介绍1&#xff09;箱形图介绍2&#xff09;怎么看箱型图&#xff1f;3&#xff09;解释说明 2. 普通箱型图3. 水平箱型图4. 群组箱型图5. 带异常点的箱型图书籍推荐 专栏导读 &#x1f525;&#x1f525;本文已收录于《100天精通Python从入门到就业…

rust 如何定义[u8]数组?

在Rust中&#xff0c;有多种方式可以定义 [u8] 数组。以下是一些常见的方式&#xff1a; 使用数组字面量初始化数组&#xff1a; let array: [u8; 5] [1, 2, 3, 4, 5];使用 vec! 宏创建可变长度的数组&#xff1a; let mut vec: Vec<u8> vec![1, 2, 3, 4, 5];使用 v…

适配器模式与装饰器模式对比分析:优雅解决软件设计中的复杂性

适配器模式与装饰器模式对比分析&#xff1a;优雅解决软件设计中的复杂性 在软件设计中&#xff0c;我们常常面临着需要将不同接口或类协调工作的情况&#xff0c;同时还要满足灵活性和可扩展性的需求。为了应对这些挑战&#xff0c;适配器模式和装饰器模式应运而生&#xff0c…

IDEA Debug小技巧 添加减少所查看变量、查看不同线程

问题 IDEA的Debug肯定都用过。它下面显示的变量&#xff0c;有什么门道&#xff1f;可以增加变量、查看线程吗&#xff1f; 答案是&#xff1a;可以。 演示代码 代码如下&#xff1a; package cn.itcast.attempt.threadAttempt.attempt2;public class Test {public static …

GFS分布式文件系统

目录 一、GlusterFS简介 二、GlusterFS特点 1.扩展性和高性能 2.高可用性 3.全局统一命名空间 4.弹性卷管理 5.基于标准协议 三、GlusterFS 术语 1.Brick&#xff08;存储块&#xff09; 2.Volume&#xff08;逻辑卷&#xff09; 3.FUSE 4.VFS 5.Glusterd&#xf…

day48-ajax+SSM分页

AjaxSSM分页 非分页版controller及html&#xff1a; 分页模糊查询controller&#xff1a; Postman测试&#xff08;无网页&#xff09;&#xff1a; 分页网页&#xff1a; 分页网页中添加模糊查询&#xff1a; 分页网页中实现添加功能&#xff1a; &#xff08;1&am…

Flutter 状态栏完美攻略

1. 沉浸式状态栏 Scaffold(extendBodyBehindAppBar: true,appBar: AppBar(toolbarHeight: 0,),body: Container(color:Colors.red) ) 2. 状态栏的背景颜色 Scaffold(appBar: AppBar(backgroundColor: Colors.transparent,),body: Container(color:Colors.red) ) 3. 状态栏的…

RabbitMQ 教程 | 第4章 RabbitMQ 进阶

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…

【深度学习Week3】ResNet+ResNeXt

ResNetResNeXt 一、ResNetⅠ.视频学习Ⅱ.论文阅读 二、ResNeXtⅠ.视频学习Ⅱ.论文阅读 三、猫狗大战Lenet网络Resnet网络 四、思考题 一、ResNet Ⅰ.视频学习 ResNet在2015年由微软实验室提出&#xff0c;该网络的亮点&#xff1a; 1.超深的网络结构&#xff08;突破1000层&…

b 树和 b+树的理解

项目场景&#xff1a; 图灵奖获得者&#xff08;Niklaus Wirth &#xff09;说过&#xff1a; 程序 数据结构 算法&#xff0c; 也就说我们无时无刻 都在和数据结构打交道。 只是作为 Java 开发&#xff0c;由于技术体系的成熟度较高&#xff0c;使得大部分人认为&#xff1…

留存测试数据,Apipost接口用例详解

接口用例可以在不影响源接口数据的情况下对接口添加多个用例&#xff0c;方便测试并保存测试数据。 创建用例 左侧目录选择接口后进入接口用例页面&#xff0c;点击添加用例 在弹出窗口中修改各种参数。如登录接口&#xff0c;可修改用户名为空&#xff0c;并添加断言。 执行…

数据湖如何为企业带来9%的高增长?可否取代数据仓库?

什么是数据湖&#xff1f; 数据湖是一个集中的存储库&#xff0c;允许您以任何规模存储所有结构化和非结构化数据。您可以按原样存储数据&#xff0c;而不必首先构造数据&#xff0c;并运行不同类型的分析—从仪表板和可视化到大数据处理、实时分析和机器学习&#xff0c;以指…

css滤镜:drop-shadow

一、用法 drop-shadow( offset-x offset-y blur-radius spread-radius color ) offset-x&#xff1a;此参数设置图像的水平偏移。正值将创建右侧的偏移量&#xff0c;负值将创建左侧的偏移量。offset-y&#xff1a;此参数设置图像的垂直偏移。正值创建到底部的偏移量&#xff…

redis命令行设置key过期时间

redis> SET cache_page "www.google.com"OK redis> EXPIRE cache_page 30 # 设置过期时间为 30 秒(integer) 1 redis> TTL cache_page # 查看剩余生存时间(integer) 23 redis> EXPIRE cache_page 30000 # 更新过期时间(integer) 1 redis> T…

简单版本视频播放服务器V4,layui界面

简单版本视频播放服务器V4 前一个版本内容&#xff0c;可以查看 https://blog.csdn.net/wtt234/article/details/131759154 优化内容&#xff1a; 1.返回列表的优化&#xff0c;优化了原来返回空列表名称的问题 2.前端才有layui优化内容 后端&#xff1a; package mainim…