Vue [Day6]

路由进阶

路由模块的封装抽离

在这里插入图片描述



src/router/index.js

import VueRouter from 'vue-router'
// 用绝对路径的方式来写目录     @ 相当于src
import Find from '@/views/Find'
import Friend from '../views/Friend'
import My from '../views/My'import Vue from 'vue'
Vue.use(VueRouter)const router = new VueRouter({routes: [{ path: '/find', component: Find },{ path: '/friend', component: Friend },{ path: '/my', component: My},]
})// 导出
export default router


src/main.js

import Vue from 'vue'
import App from './App.vue'// 导入
import router from './router/index'Vue.config.productionTip = falsenew Vue({render: h => h(App),// router:router// 简写router
}).$mount('#app')


声明式导航 - 导航链接

在这里插入图片描述
在这里插入图片描述App.vue

<template><div class="app"><div class="nav"><router-link to="/find">发现</router-link><router-link to="/friend">朋友</router-link><router-link to="/my">我的</router-link></div><!-- 路由出口 匹配组件所展示的位置 --><router-view></router-view></div>
</template><script>
export default {}
</script><style>
.nav a {display: inline-block;width: 50px;height: 30px;text-decoration: none;background-color: #fbfafa;border: 1px solid black;
}.nav a.router-link-active {background-color: #e68b8b;
}
</style>

router-link(-exact)-active

在这里插入图片描述

自定义高亮类名

router/index.js

const router = new VueRouter({routes: [{ path: '/find', component: Find },{ path: '/friend', component: Friend },{ path: '/my', component: My},],//配置 linkActiveClass: 'active',linkExactActiveClass:'exact-active'
})


App.vue中对应的css名字修改 
.nav a.active {background-color: #e68b8b;
}


声明式导航 - 跳转传参

法1：查询参数传参（适用于多个值

在这里插入图片描述




router/index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router = new VueRouter({routes: [{ path: '/home', component: Home },{ path: '/search', component: Search }]
})export default router


App.vue 
<template><div id="app"><div class="link"><router-link to="/home">首页</router-link><router-link to="/search">搜索页</router-link></div><router-view></router-view></div>
</template><script>
export default {}
</script><style scoped>
.link {height: 50px;line-height: 50px;background-color: #495150;display: flex;margin: -8px -8px 0 -8px;margin-bottom: 50px;
}
.link a {display: block;text-decoration: none;background-color: #ad2a26;width: 100px;text-align: center;margin-right: 5px;color: #fff;border-radius: 5px;
}
</style>


views/Home.vue

<template><div class="home"><div class="logo-box"></div><div class="search-box"><input type="text" /><button>搜索一下</button></div><div class="hot-link">热门搜索：<router-link to="/search?key=黑马程序员">黑马程序员</router-link><router-link to="/search?key=前端培训">前端培训</router-link><router-link to="/search?key=如何成为前端大牛">如何成为前端大牛</router-link></div></div>
</template><script>
export default {name: 'FindMusic'
}
</script><style>
.logo-box {height: 150px;background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {display: flex;justify-content: center;
}
.search-box input {width: 400px;height: 30px;line-height: 30px;border: 2px solid #c4c7ce;border-radius: 4px 0 0 4px;outline: none;
}
.search-box input:focus {border: 2px solid #ad2a26;
}
.search-box button {width: 100px;height: 36px;border: none;background-color: #ad2a26;color: #fff;position: relative;left: -2px;border-radius: 0 4px 4px 0;
}
.hot-link {width: 508px;height: 60px;line-height: 60px;margin: 0 auto;
}
.hot-link a {margin: 0 5px;
}
</style>


views/Search.vue

<template><div class="search"><p>搜索关键字: {{ $route.query.key }}</p><p>搜索结果:</p><ul><li>.............</li><li>.............</li><li>.............</li><li>.............</li></ul></div>
</template><script>
export default {name: 'MyFriend',created() {// 在created中，获取路由参数// this.$route.query.参数名 获取console.log(this.$route.query.key)}
}
</script><style>
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
</style>


法2：动态路由传参（适用于单个参数

在这里插入图片描述index.js

const router = new VueRouter({routes: [{ path: '/home', component: Home },{ path: '/search/:totowords', component: Search }]
})


Home.vue 
<div class="hot-link">热门搜索：<router-link to="/search/黑马程序员">黑马程序员</router-link><router-link to="/search/前端培训">前端培训</router-link><router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link></div>


Search.vue 
<div class="search"><!-- 变了 --><p>搜索关键字: {{ $route.params.totowords }}</p><p>搜索结果:</p><ul><li>.............</li><li>.............</li><li>.............</li><li>.............</li></ul></div>
</template>


动态路由参数可选符

在这里插入图片描述

两种传参方式的区别

在这里插入图片描述


自己尝试了一下 button （动态路由传参

因为发现案例的搜索按钮，没用行为，就咋gpt的辅助下，踉踉跄跄的实现了
index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) const router = new VueRouter({routes: [{ path: '/home', component: Home },// { path: '/search/:totowords', component: Search },// 和上面的没啥大区别，就是起了个名字{path: '/search/:text',name: 'search',//!!!!component:  Search}]
})export default router


Home.app

<template><div class="home"><div class="logo-box"></div><div class="search-box"><!-- !!!!! --><input v-model="text" type="text" /><button @click="cli">搜索一下</button></div><div class="hot-link">热门搜索：<router-link to="/search/黑马程序员">黑马程序员</router-link><router-link to="/search/前端培训">前端培训</router-link><router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link></div></div>
</template><script>
export default {name: 'FindMusic',data() {return {text: ''}},methods: {cli() {// 法一：// let text = this.text// this.$router.push({ name: 'search', params: { text } })//  法二(错误的)：  就一直想这样写，就是报错，后来gpt给了法3 才ok// 原来是不同名的不可以简写，要 xxxx:自己起的名字//   this.$router.push({ name: 'search', params: {  this.text } })// 法三：this.$router.push({ name: 'search', params: { text: this.text } })}}
}
</script><style>
.logo-box {height: 150px;background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {display: flex;justify-content: center;
}
.search-box input {width: 400px;height: 30px;line-height: 30px;border: 2px solid #c4c7ce;border-radius: 4px 0 0 4px;outline: none;
}
.search-box input:focus {border: 2px solid #ad2a26;
}
.search-box button {width: 100px;height: 36px;border: none;background-color: #ad2a26;color: #fff;position: relative;left: -2px;border-radius: 0 4px 4px 0;
}
.hot-link {width: 508px;height: 60px;line-height: 60px;margin: 0 auto;
}
.hot-link a {margin: 0 5px;
}
</style>


Search.vue

<template><div class="search"><!-- 变了 --><p>搜索关键字: {{ $route.params.text }}</p><p>搜索结果:</p><ul><li>.............</li><li>.............</li><li>.............</li><li>.............</li></ul></div>
</template><script>
export default {name: 'MyFriend'
}
</script><style>
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
</style>


App.vue
同上



重定向

在这里插入图片描述


404

在这里插入图片描述



在这里插入图片描述



模式设置

需要后台配置访问规则
在这里插入图片描述



在这里插入图片描述


编程式导航 - 基本跳转

path路径跳转

在这里插入图片描述Home.vue

<template><div class="home"><div class="logo-box"></div><div class="search-box"><!-- !!!!! --><input v-model="text" type="text" /><button @click="cli">搜索一下</button></div><div class="hot-link">热门搜索：<router-link to="/search/黑马程序员">黑马程序员</router-link><router-link to="/search/前端培训">前端培训</router-link><router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link></div></div>
</template><script>
export default {name: 'FindMusic',data() {return {text: ''}},methods: {cli() {// 通过路径的方式跳转// （1）this.$router.push('路径名') 简写// this.$router.push('/search')// （2）this.$router.push({  完整写法//   path:'路径名称'// })this.$router.push({//完整写法path: './search'})}}
}
</script><style>
.logo-box {height: 150px;background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {display: flex;justify-content: center;
}
.search-box input {width: 400px;height: 30px;line-height: 30px;border: 2px solid #c4c7ce;border-radius: 4px 0 0 4px;outline: none;
}
.search-box input:focus {border: 2px solid #ad2a26;
}
.search-box button {width: 100px;height: 36px;border: none;background-color: #ad2a26;color: #fff;position: relative;left: -2px;border-radius: 0 4px 4px 0;
}
.hot-link {width: 508px;height: 60px;line-height: 60px;margin: 0 auto;
}
.hot-link a {margin: 0 5px;
}
</style>


name 命名路由跳转（适合path路径长的场景）

在这里插入图片描述Home.vue
微调

 methods: {cli() {// 通过命名路由的方式跳转（需要给路由命名this.$router.push({// name:'路由名'name: 'search'})}}


index.js

    routes: [{ path: '/', redirect:'/Home' },{ path: '/home', component: Home },// { path: '/search/:totowords', component: Search },// 和上面的没啥大区别，就是起了个名字{path: '/search/:text',name: 'search',//!!!!component:  Search},{ path: '*', component: NotFind },  ]

编程式导航 - 路由传参

在这里插入图片描述



path路径跳转 + 动态路由传参



简便写法

在这里插入图片描述



完整写法
在这里插入图片描述

以上的index.js 里的name:'/search’不用写，忘记删了




动态路由是’/’
查询参数是’?’



path路径跳转 + 查询参数传参

在这里插入图片描述


简写

在这里插入图片描述


完整写法
请添加图片描述



name命名路由 + 动态路由传参

在这里插入图片描述



在这里插入图片描述



name命名路由 + 查询参数传参

在这里插入图片描述

在这里插入图片描述

小结

在这里插入图片描述


在这里插入图片描述



【综合案例】—— 面经基础版

在这里插入图片描述




在这里插入图片描述





在这里插入图片描述


在这里插入图片描述




在这里插入图片描述

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

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

相关文章

在指定的 DSN 中，驱动程序和应用程序之间的体系结构不匹配

在指定的 DSN 中，驱动程序和应用程序之间的体系结构不匹配

1.Cadence 17.2 配置CIS数据库报&#xff1a;ERROR(ORCIS-6245): Database Operation Failed 安装cadance17.2以上版本时&#xff0c;ERROR(ORCIS-6245): Database Operation Failed_收湾湾的博客-CSDN博客 原因是ODBC数据库没有配置&#xff0c;或者没有驱动&#xff0c; 驱…
阅读更多...
Linux（进程间通信详解）

Linux（进程间通信详解）

进程间通信&#xff0c;顾名思义&#xff0c;就是进程与进程之间互通信交流&#xff0c;OS保证了各进程之间相互独立&#xff0c;但这不意味着进程与进程之间就互相隔离开&#xff0c;在不少的情况下&#xff0c;进程之间需要相互配合共同完成某项6任务&#xff0c;这就要求各进…
阅读更多...
产品体系架构202308版

产品体系架构202308版

1.前言 当我们不断向前奔跑时&#xff0c;需要回头压实走过的路。不断扩张的同时把相应的内容沉淀下来&#xff0c;为后续的发展铺垫基石。 不知从何时起&#xff0c;产品的架构就面向了微服务/中台化/前后端分离/低代码化/分布式/智能化/运行可观测化的综合体&#xff0c;让…
阅读更多...
SpringCloud实用篇4——MQ RabbitMQ SpringAMQP

SpringCloud实用篇4——MQ RabbitMQ SpringAMQP

目录 1 初识MQ1.1 同步和异步通讯1.1.1 同步通讯1.1.2 异步通讯 1.2 技术对比 2.快速入门2.1 安装RabbitMQ2.1.1 单机部署2.1.2集群部署 2.2 RabbitMQ消息模型2.3.导入Demo工程2.4 入门案例2.4.1 publisher实现2.4.2 consumer实现 3 SpringAMQP3.1 Basic Queue 简单队列模型3.1…
阅读更多...
Linux命令200例：mkdir用于创建目录（常用）

Linux命令200例：mkdir用于创建目录（常用）

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &…
阅读更多...
唐刘：TiDB 研发工程实践及 TiDB 人才观丨CCF 中国数据库暑期学校

唐刘：TiDB 研发工程实践及 TiDB 人才观丨CCF 中国数据库暑期学校

在刚刚结束的 CCF 中国数据库暑期学校上&#xff0c; PingCAP 的研发副总裁唐刘分享了在 TiDB 研发过程中的工程实践经验和人才培养方法。目前&#xff0c;TiDB 已广泛应用于各行各业&#xff0c;有着庞大的用户基数&#xff0c;面临多样化的数据处理需求。PingCAP 通过开源、敏…
阅读更多...
Git介绍及常用命令详解

Git介绍及常用命令详解

一、Git的概述 Git是一个分布式版本控制工具&#xff0c;通常用来对软件开发过程中的源代码文件进行管理。 Git 会跟踪我们对文件所做的更改&#xff0c;因此我们可以记录已完成的工作&#xff0c;并且可以在需要时恢复到特定或以前的版本。Git 还使多人协作变得更加容易&…
阅读更多...
研发工程师玩转Kubernetes——PVC通过storageClassName进行延迟绑定

研发工程师玩转Kubernetes——PVC通过storageClassName进行延迟绑定

不同的PV可以使用相同的StorageClass&#xff0c;它们是一对多的关系。 PV可以设置节点亲和性。比如下图&#xff0c;local-storage-class-waitforfirstconsumer-pv-ubuntuc只能在节点ubuntuc上&#xff1b;local-storage-class-waitforfirstconsumer-pv-ubuntud只能在节点ubu…
阅读更多...
C语言笔试训练【第六天】

C语言笔试训练【第六天】

大家好&#xff0c;我是纪宁。今天是C语言笔试训练的第6天&#xff0c;加油&#xff01; 往期回顾&#xff1a; C语言笔试训练【第五天】 C语言笔试训练【第四天】 C语言笔试训练【第三天】 C语言笔试训练【第二天】 C语言笔试训练【第一天】 1、以下叙述中正确的是&…
阅读更多...
学习Maven Web 应用

学习Maven Web 应用

Maven Web 应用 本章节我们将学习如何使用版本控制系统 Maven 来管理一个基于 web 的项目&#xff0c;如何创建、构建、部署已经运行一个 web 应用。 创建 Web 应用 我们可以使用 maven-archetype-webapp 插件来创建一个简单的 Java web 应用。 打开命令控制台&#xff0c;…
阅读更多...
esp8266使用arduinoJson与tft_espi库发生冲突解决方法

esp8266使用arduinoJson与tft_espi库发生冲突解决方法

esp8266使用arduinoJson与tft_espi库发生冲突解决方法 arduinoJson与tft_espi库发生冲突解决方法下载arduinoJson5.0版本的&#xff0c;不要用最新版本 示范代码&#xff1a; // Copyright Benoit Blanchon 2014 // MIT License // // Arduino JSON library // https://git…
阅读更多...
docker版jxTMS使用指南：使用jxTMS采集数据之一

docker版jxTMS使用指南：使用jxTMS采集数据之一

本文讲解了如何jxTMS的数据采集与处理框架并介绍了如何用来采集数据&#xff0c;整个系列的文章请查看&#xff1a;docker版jxTMS使用指南&#xff1a;4.4版升级内容 docker版本的使用&#xff0c;请查看&#xff1a;docker版jxTMS使用指南 4.0版jxTMS的说明&#xff0c;请查…
阅读更多...
GLSL用于图像处理

GLSL用于图像处理

Pipeline 硬件处理顶点和片段的Pipeline 软件的输入 顶点着色器 顶点的glsl 输入–特殊全局变量 变量 类型 指定函数 描述 gl_ Vertex vec4 glVertex 顶点的全局空间坐标 gl_Color vec4 glColor 主颜色值 gl_SecondaryColor vec4 glSecondaryColor 辅助颜色值 gl_Normal …
阅读更多...
Springboot项目集成Durid数据源和P6Spy以及dbType not support问题

Springboot项目集成Durid数据源和P6Spy以及dbType not support问题

项目开发阶段&#xff0c;mybatis的SQL打印有占位符&#xff0c;调试起来还是有点麻烦&#xff0c;随想整合P6Spy打印可以直接执行的SQL&#xff0c;方便调试&#xff0c;用的Durid连接池。 Springboot项目集成Durid <dependency><groupId>com.alibaba</group…
阅读更多...
Redis基础命令大全

Redis基础命令大全

这里写目录标题 第一章、Redis 命令大全1.1&#xff09;通用命令语法&#xff1a;ping语法&#xff1a;dbsize语法&#xff1a;select db语法&#xff1a;flushdb语法&#xff1a;exit 或 quit语法&#xff1a;redis-cli 1.2&#xff09;Redis 的 Key 的操作命令语法&#xff1…
阅读更多...
微信小程序 地图map（电子围栏圆形和多边形）

微信小程序 地图map（电子围栏圆形和多边形）

正常情况下是没有手机上画电子围栏的&#xff0c;公共平台上我也没找到&#xff0c;所以走了一个歪点子&#xff0c;就是给地图添加点击事件&#xff0c;记录点的位置&#xff0c;在画到电子围栏上就是添加电子围栏了&#xff0c;如果只是显示电子围栏就简单了 一、多边形电子…
阅读更多...
机器人CPP编程基础-01第一个程序Hello World

机器人CPP编程基础-01第一个程序Hello World

很多课程先讲C/C或者一些其他编程课&#xff0c;称之为基础课程。然后到本科高年级进行机器人专业课学习&#xff0c;这样时间损失非常大&#xff0c;效率非常低。 C/单片机/嵌入式/ROS等这些编程基础可以合并到一门课中进行实现&#xff0c;这些素材已经迭代三轮以上&#xf…
阅读更多...
ctfshow web93-98

ctfshow web93-98

web93 打开环境是一个代码审计题目 简单分析就是输入一个变量num&#xff0c;其值不能等于4476与包含字母&#xff0c;但是他的值需要为4476 函数intval作用为获取变量的整数值&#xff0c;第二个参数的意思是进制&#xff0c;默认为10进制。题目参数为0&#xff0c;就根据变…
阅读更多...
享元模式（C++）

享元模式（C++）

定义 运用共享技术有效地支持大量细粒度的对象。 使用场景 在软件系统采用纯粹对象方案的问题在于大量细粒度的对象会很快充斥在系统中&#xff0c;从而带来很高的运行时代价——主要指内存需求方面的代价。如何在避免大量细粒度对象问题的同时&#xff0c;让外部客户程序仍…
阅读更多...
立即开始使用 3D 图像

立即开始使用 3D 图像

一、说明 这个故事介绍了使用这种类型的数据来训练机器学习3D模型。特别是&#xff0c;我们讨论了Kaggle中可用的MNIST数据集的3D版本&#xff0c;以及如何使用Keras训练模型识别3D数字。 3D 数据无处不在。由于我们希望构建AI来与我们的物理世界进行交互&#xff0c;因此使用3…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023