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

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

相关文章

2023年加湿器市场数据分析（天猫数据分析怎么做）

2023年加湿器市场数据分析（天猫数据分析怎么做）

随着人们生活水平提高、空调广泛使用&#xff0c;导致皮肤紧绷、口舌干燥、咳嗽感冒等空调病的滋生。可以看出&#xff0c;空气湿度与人体健康以及日常生活有着密切的联系。而加湿器作为室内空气湿度控制的重要工具&#xff0c;在近年来受到了越来越多的重视。根据鲸参谋电商数…
阅读更多...
python爬虫的简单实现

python爬虫的简单实现

当涉及网络爬虫时&#xff0c;Python中最常用的库之一是requests。它能够发送HTTP请求并获取网页内容。下面是一个简单的示例&#xff0c;展示如何使用requests库来获取一个网页的内容&#xff1a; import requests 指定要爬取的网页的URL url ‘https://example.com’ 发…
阅读更多...
Godot 4 源码分析 - 文件读入编码处理

Godot 4 源码分析 - 文件读入编码处理

今天需要读入xml文件进行处理&#xff0c;结果读入一个带中文的文件时&#xff0c;出错了。当然程序还能运行&#xff0c;但编译器一直报错&#xff0c;而且XML解析也不正确 单步调试发现读入的内容出现乱码&#xff0c;具体逻辑&#xff1a; String FileAccess::get_as_text…
阅读更多...
Host Is Not Allowed to Connect to This MySQL Server

Host Is Not Allowed to Connect to This MySQL Server

Mysql 8 版本 8.0.24 [rootVM-0-5-centos ~]# mysql -u root -p Enter password: Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 128 Server version: 8.0.24 Source distribution部署在腾讯云服务器&#xff0c;本地电脑操作pyth…
阅读更多...
C++所有运算符及其优先级表格

C++所有运算符及其优先级表格

运算符运算符介绍优先级::范围解析1() [] -> .圆括号、方括号、箭头、点号2 --后缀递增、后缀递减2typeid const_cast dynamic_cast reinterpret_cast static_cast类型名称、常量类型转换、动态类型转换、重新解释的类型转换、静态类型转换2! ~ -- - * & (type) sizeo…
阅读更多...
物联网与5G引领智慧城市时代的到来

物联网与5G引领智慧城市时代的到来

智慧城市需要依赖于多种技术&#xff0c;这些技术的应用将城市转变为高效、智能、可持续发展的现代化城市。智慧城市是基于信息技术、物联网和大数据等先进技术的融合&#xff0c;旨在提升城市的运行效率、资源利用效率和居民生活质量。以下是智慧城市需要依赖的主要技术&#…
阅读更多...
Token认证的未来：无状态身份验证的新趋势

Token认证的未来：无状态身份验证的新趋势

Token认证的未来&#xff1a;无状态身份验证的新趋势 前言一、Session认证存在的问题二、什么是Token&#xff08;令牌&#xff09;认证&#xff1f;三、Token&#xff08;令牌&#xff09;认证流程四、代码演示五、Token认证优点 前言 本博主将用CSDN记录软件开发求学之路上亲…
阅读更多...
宏任务与微任务

宏任务与微任务

在 JavaScript 中&#xff0c;任务分为&#xff1a; 宏任务 macro task微任务 micro task 他们的执行顺序有一定的区别&#xff0c;理解他们的执行机制对于处理异步操作非常重要。 宏任务 宏任务是由 JavaScript 引擎提供的任务源&#xff0c;通常包括一下几种情况&#xf…
阅读更多...
装饰器模式

装饰器模式

装饰器模式 是一种设计模式&#xff0c;它能够在不修改原有对象的情况下&#xff0c;通过组合方式来动态地扩展对象的功能。这个模式适用于那些对象之间的继承关系复杂、需要灵活地增加功能的场景。 想象一下&#xff0c;有一个基础的对象&#xff0c;它做了某些事情。现在希望…
阅读更多...
小程序学习笔记之一：起步

小程序学习笔记之一：起步

前言 参考文档&#xff1a;微信开放文档 1. 小程序简介 1.1 每个公众号下所有 Web App 累计最多可缓存 5M 的资源。 1.2 小程序之前的痛点&#xff1a;1.白屏。2.页面切换生硬。3.点击的迟滞感 1.3 小程序开发需要申请小程序账号、安装小程序开发者工具、配置项目等等过程…
阅读更多...
Kafka3.4 SASL/kerberos/ACL 证以及 SSL 加密连接

Kafka3.4 SASL/kerberos/ACL 证以及 SSL 加密连接

Kafka3.4 SASL/kerberos ACL 证以及 SSL 加密连接 序 前面我们使用 kafka3.3.1 on zookeeper 的模式进行多网段监听的 kafka 集群&#xff0c;顺便搭建起 kafkaui 后发现一些问题&#xff0c;我们 kafka 集群没有连接认证&#xff0c;万一谁知道了我们的 kafka 连接地址&…
阅读更多...
PHP智能人才招聘网站mysql数据库web结构apache计算机软件工程网页wamp

PHP智能人才招聘网站mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP智能人才招聘网站 是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 下载地址 https://download.csdn.net/download/qq_41221322/88199392 视频演示 PH…
阅读更多...
uniapp 自定义写底部导航栏

uniapp 自定义写底部导航栏

项目的需求是根据用户的权限判断&#xff0c;当前显示哪些菜单。 项目使用uniapp vue3.0 1 根据前端写的项目目录来判断当前返回的路由是否有相同的&#xff0c;因为是数组所以做了封装函数来判断当前的路由数组。 //函数封装 function resArr(arr1, arr2) {const appTabs …
阅读更多...
Linu网络服务NFS

Linu网络服务NFS

linux网络服务NFS 一.NFS简介二.NFS原理三.NFS优势四.配置文件五.NFS共享存储服务的操作步骤 一.NFS简介 NFS&#xff08;网络文件服务&#xff09; NFS是一种基于tcp/ip传输的网络文件系统协议&#xff0c;最初由sun公司开放通过使用NFS协议&#xff0c;客户机可以像访问本地…
阅读更多...
【react】react中BrowserRouter和HashRouter的区别：

【react】react中BrowserRouter和HashRouter的区别：

文章目录 1.底层原理不一样:2.path衣现形式不一样3.刷新后对路山state参数的影响4.备注: HashRouter可以用于解决一些路径错误相关的问题 1.底层原理不一样: BrowserRouter使用的是H5的history API&#xff0c;不兼容IE9及以下版不。 HashRouter使用的是URL的哈希值。 2.path衣…
阅读更多...
（6）将Mission Planner连接到Autopilot

（6）将Mission Planner连接到Autopilot

文章目录 前言 6.1 设置连接 6.2 故障处理 6.3 复合连接的故障处理 6.4 相关话题 前言 本文解释了如何将 Mission Planner 连接到自动驾驶仪上&#xff0c;以便接收遥测数据并控制飞行器。 &#xff01;Note 对于已有 ArduPilot 固件的安装&#xff0c;或没有现有 Ardu…
阅读更多...
监控Kubernetes Node组件的关键指标

监控Kubernetes Node组件的关键指标

所有的 Kubernetes 组件&#xff0c;都提供了 /metrics 接口用来暴露监控数据&#xff0c;Kube-Proxy 也不例外。通过 ss 或者 netstat 命令可以看到 Kube-Proxy 监听的端口&#xff0c;一个是 10249&#xff0c;用来暴露监控指标&#xff0c;一个是 10256 &#xff0c;作为…
阅读更多...
el-dialog嵌套,修改内层el-dialog样式(自定义样式)

el-dialog嵌套,修改内层el-dialog样式(自定义样式)

el-dialog嵌套使用时,内层的el-dialog要添加append-to-body属性 给内层的el-dialog添加custom-class属性,添加自定义类名 <el-dialog:visible.sync"dialogVisible"append-to-bodycustom-class"tree-cesium-container"><span>这是一段信息<…
阅读更多...
【Springboot】@ComponentScan 详解

【Springboot】@ComponentScan 详解

文章目录 ComponentScanComponentScan ANNOTATION 和 REGEXComponentScan CUSTOMComponentScan ASSIGNABLE_TYPE ComponentScan ComponentScan 是 Spring 框架中的一个注解&#xff0c;用于自动扫描和注册容器中的组件。 使用 ComponentScan 注解可以告诉 Spring 在指定的包或…
阅读更多...
【数学建模】--因子分析模型

【数学建模】--因子分析模型

因子分析有斯皮尔曼在1904年首次提出&#xff0c;其在某种程度上可以被看成时主成分分析的推广和扩展。 因子分析法通过研究变量间的相关稀疏矩阵&#xff0c;把这些变量间错综复杂的关系归结成少数几个综合因子&#xff0c;由于归结出的因子个数少于原始变量的个数&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023