vue-6

一、声明式导航-导航链接

1.需求

实现导航高亮效果

在这里插入图片描述

如果使用a标签进行跳转的话,需要给当前跳转的导航加样式,同时要移除上一个a标签的样式,太麻烦!!!

2.解决方案

vue-router 提供了一个全局组件 router-link (取代 a 标签)

  • 能跳转,配置 to 属性指定路径(必须) 。本质还是 a 标签 ,to 无需 #
  • 能高亮,默认就会提供高亮类名,可以直接设置高亮样式

语法: <router-link to=“path的值”>发现音乐</router-link>

  <div><div class="footer_wrap"><router-link to="/find">发现音乐</router-link><router-link to="/my">我的音乐</router-link><router-link to="/friend">朋友</router-link></div><div class="top"><!-- 路由出口 → 匹配的组件所展示的位置 --><router-view></router-view></div></div>

3.通过router-link自带的两个样式进行高亮

使用router-link跳转后,我们发现。当前点击的链接默认加了两个class的值 router-link-exact-activerouter-link-active

我们可以给任意一个class属性添加高亮样式即可实现功能

<template><div><div class="footer_wrap"><router-link to="/find">发现音乐</router-link><router-link to="/my">我的音乐</router-link><router-link to="/friend">朋友</router-link></div><div class="top"><!-- 路由出口 → 匹配的组件所展示的位置 --><router-view></router-view></div></div>
</template><script>
export default {};
</script><style>
body {margin: 0;padding: 0;
}
.footer_wrap {position: relative;left: 0;top: 0;display: flex;width: 100%;text-align: center;background-color: #333;color: #ccc;
}
.footer_wrap a {flex: 1;text-decoration: none;padding: 20px 0;line-height: 20px;background-color: #333;color: #ccc;border: 1px solid black;
}
.footer_wrap a.router-link-active {background-color: purple;
}
.footer_wrap a:hover {background-color: #555;
}
</style>

4.总结

  • router-link是什么?
  • router-link怎么用?
  • router-link的好处是什么?

二、声明式导航-两个类名

当我们使用<router-link></router-link>跳转时,自动给当前导航加了两个类名

在这里插入图片描述

1.router-link-active

模糊匹配(用的多)

to=“/my” 可以匹配 /my /my/a /my/b …

只要是以/my开头的路径 都可以和 to="/my"匹配到

2.router-link-exact-active

精确匹配

to=“/my” 仅可以匹配 /my

3.在地址栏中输入二级路由查看类名的添加

4.总结

  • router-link 会自动给当前导航添加两个类名,有什么区别呢?

三、声明式导航-自定义类名(了解)

1.问题

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

在这里插入图片描述

2.解决方案

我们可以在创建路由对象时,额外配置两个配置项即可。 linkActiveClasslinkExactActiveClass

const router = new VueRouter({routes: [...],linkActiveClass: "类名1",linkExactActiveClass: "类名2"
})

在这里插入图片描述

3.代码演示

// 创建了一个路由对象
const router = new VueRouter({routes: [...], linkActiveClass: 'active', // 配置模糊匹配的类名linkExactActiveClass: 'exact-active' // 配置精确匹配的类名
})

4.总结

如何自定义router-link的两个高亮类名

四、声明式导航-查询参数传参

1.目标

在跳转路由时,进行传参

在这里插入图片描述

比如:现在我们在搜索页点击了热门搜索链接,跳转到详情页,需要把点击的内容带到详情页,改怎么办呢?

2.跳转传参

我们可以通过两种方式,在跳转的时候把所需要的参数传到其他页面中

  • 查询参数传参
  • 动态路由传参

3.查询参数传参

  • 如何传参?

    <router-link to=“/path?参数名=值”></router-link>

  • 如何接受参数

    固定用法:$router.query.参数名

4.代码演示

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>

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>

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>

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

main.js

...
import router from './router/index'
...
new Vue({render: h => h(App),router
}).$mount('#app')

五、声明式导航-动态路由传参

1.动态路由传参方式

  • 配置动态路由

    动态路由后面的参数可以随便起名,但要有语义

    const router = new VueRouter({routes: [...,{ path: '/search/:words', component: Search }]
    })
    
  • 配置导航链接

    to=“/path/参数值”

  • 对应页面组件接受参数

    $route.params.参数名

    params后面的参数名要和动态路由配置的参数保持一致

2.代码演示

router/index.js

import Home from '@/views/Home'
import Search from '@/views/Search'import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter) // VueRouter插件初始化const router = new VueRouter({// routes 路由规则们// route  一条路由规则 { path: 路径, component: 组件 }routes: [{ path: '/home', component: Home },{ path: '/search/:words', component: Search }]
})export default router;

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/黑马程序员">黑马程序员</router-link><router-link to="/search/前端培训">前端培训</router-link><router-link to="/search/如何成为前端大牛">如何成为前端大牛</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>

Search.vue

<template><div class="search"><p>搜索关键字: {{ $route.params.words }}</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.参数名 获取查询参数// this.$route.params.参数名 获取动态路由参数console.log(this.$route.params.words);},
};
</script><style>
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
</style>

3.查询参数传参 VS 动态路由传参

  1. 查询参数传参 (比较适合传多个参数)

  2. 跳转:to=“/path?参数名=值&参数名2=值”

  3. 获取:$route.query.参数名

  4. 动态路由传参 (优雅简洁,传单个参数比较方便)

    1. 配置动态路由:path: “/path/:参数名”
    2. 跳转:to=“/path/参数值”
    3. 获取:$route.params.参数名

    注意:动态路由也可以传多个参数,但一般只传一个

4.总结

声明式导航跳转时, 有几种方式传值给路由页面?

  • 查询参数传参(多个参数)
  • 动态路由传参(一个参数,优雅简洁)

六、动态路由参数的可选符(了解)

1.问题

配了路由 path:“/search/:words” 为什么按下面步骤操作,会未匹配到组件,显示空白?

在这里插入图片描述

2.原因

/search/:words 表示,必须要传参数。如果不传参数,也希望匹配,可以加个可选符"?"

const router = new VueRouter({routes: [...{ path: '/search/:words?', component: Search }]
})

七、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跳转方式

      // 1. 通过路径的方式跳转// (1) this.$router.push('路由路径') [简写]this.$router.push('/search')// (2) this.$router.push({     [完整写法]//         path: '路由路径' //     })this.$router.push({path: '/search'})

6.name命名路由跳转

特点:适合 path 路径长的场景

语法:

  • 路由规则,必须配置name配置项

    { name: '路由名', path: '/path/xxx', component: XXX },
    
  • 通过name来进行跳转

    this.$router.push({name: '路由名'
    })
    

7.代码演示通过name命名路由跳转

//路由规则中配置name: 
{ name: "search", path: '/search/:words?', component: Search },
// 2. 通过命名路由的方式跳转 (需要给路由起名字) 适合长路径//    this.$router.push({//        name: '路由名'//    })this.$router.push({name: 'search'})

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.什么是keep-alive

keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件中。

优点:

在组件切换过程中把切换出去的组件保留在内存中,防止重复渲染DOM,

减少加载时间及性能消耗,提高用户体验性。

App.vue

<template><div><keep-alive><router-view></router-view></keep-alive></div>
</template>

问题:

缓存了所有被切换的组件

2.keep-alive的三个属性

① include : 组件名数组,只有匹配的组件会被缓存

② exclude : 组件名数组,任何匹配的组件都不会被缓存

③ max : 最多可以缓存多少组件实例

App.vue

<template><div class="h5-wrapper"><keep-alive :include="['LayoutPage']"><router-view></router-view></keep-alive></div>
</template>

3.额外的两个生命周期钩子

keep-alive的使用会触发两个生命周期函数

activated 当组件被激活(使用)的时候触发 → 进入这个页面的时候触发

deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发

组件缓存后不会执行组件的created, mounted, destroyed 等钩子了

所以其提供了actived 和deactived钩子,帮我们实现业务需求。

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

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

相关文章

【PickerView案例13-应用程序对象介绍 Objective-C语言】

一、应用程序对象介绍: 1.应用程序对象介绍: 应用程序介绍: 应用程序介绍: 应用程序介绍: 应用程序启动,本身这一过程,不是应用程序启动就完事儿了, 它有一些比较细节的东西,比如说: 1)info.plist以及pch文件 2)UIApplication对象 这个呢,我们都是分开的去说,…

北斗高精度定位为无人车成为机场运营新常态提供技术保障

在现代快节奏的生活中&#xff0c;人们对交通效率和安全性的需求越来越高。为了满足这一需求&#xff0c;无人驾驶技术被广泛研究和应用。而随着北斗卫星系统的发展&#xff0c;机场无人车正成为潜在的未来运输解决方案。本文将深入探讨北斗卫星如何改变机场运营&#xff0c;以…

一站式数据可视化与分析平台JVS智能BI强大的数据节点功能

在商业智能&#xff08;BI&#xff09;中&#xff0c;数据集是数据的集合&#xff0c;用于分析和报告。数据节点是数据集中的一个重要组成部分&#xff0c;它代表数据集中的一个特定数据点或数据元素。通过使用数据节点&#xff0c;可以对数据进行过滤、分组和计算&#xff0c;…

2785323-77-3,MAL-Alkyne,双功能连接试剂Alkyne maleimide

炔烃马来酰亚胺&#xff0c;Alkyne maleimide,MAL-Alkyne是一种非常有用的双功能连接试剂&#xff0c;可以在生物分子中发挥重要的作用。它的马来酰亚胺基团可以与生物分子中的硫醇基团反应&#xff0c;形成共价键&#xff0c;从而将生物分子与炔烃连接起来。这种连接方式在生物…

将 Ordinals 与比特币智能合约集成:第 3 部分

基于 Ordinals 的 BSV-20 同质化代币 之前&#xff0c;我们展示了如何将比特币智能合约与 Ordinals 集成&#xff0c;Ordinals 可以被视为链上的 NFT。 在本文中&#xff0c;我们将展示如何将它们与同质化代币&#xff08;即 BSV-20 代币&#xff09;集成。 我们仍然以拍卖为例…

【数据库——MySQL(实战项目1)】(2)图书借阅系统

目录 1. 简述2. 功能代码2.1 创建视图显示所有逾期未归还的借阅信息&#xff08;包括借阅人姓名&#xff0c;借阅人类别&#xff0c;书名&#xff0c;借出日期&#xff0c;应归还日期&#xff0c;逾期时长&#xff09;&#xff1b;2.2 创建存储过程&#xff0c;每借出一本图书&…

【算法笔记】LCR 086. 分割回文串

基本思想是使用回溯法&#xff0c;回溯法都可以将问题划分为一个解空间树&#xff1a;假设字符串s为"aab"&#xff0c;那么我们可以使用深度优先搜索去构建解空间树&#xff1a; dfs遍历出来的第一个序列是[a, a, b]&#xff0c;显然该序列都是回文子串&#xff0c;…

前后端分离项目-基于springboot+vue的足球青训俱乐部管理后台系统的设计与实现(内含代码+文档+报告)

博主介绍&#xff1a;✌全网粉丝10W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业毕业设计项目实战6年之久&#xff0c;选择我们就是选择放心、选择安心毕业✌ &#x1f345;由于篇幅限制&#xff0c;想要获取完整文章或者源码&#xff0c;或者代做&am…

colab切换目录的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

【MySQL】深入理解MySQL中的Join算法

原创不易&#xff0c;注重版权。转载请注明原作者和原文链接 文章目录 什么是JoinIndex Nested-Loop JoinBlock Nested-Loop JoinMRR & BKA总结 在数据库处理中&#xff0c;Join操作是最基本且最重要的操作之一&#xff0c;它能将不同的表连接起来&#xff0c;实现对数据集…

前端八股文

目录 一、CSS1.说一下CSS的盒模型。2.CSS选择器的优先级&#xff1f;3.隐藏元素的方法有哪些&#xff1f;4.px和rem的区别是什么&#xff1f;5.重绘重排有什么区别&#xff1f;6.让一个元素水平垂直居中的方式有哪些&#xff1f;7.CSS的哪些属性哪些可以继承&#xff1f;哪些不…

vscode 调试使用 make 编译的项目

1、首先点击运行 --> 启动调试&#xff1a; 2、选择g或gcc生成和调试活动文件&#xff1a; 3、出现下面提示是正常的&#xff0c;点击仍要调试&#xff1a; 点击打开“launch.json”&#xff1a; 4、此时会在项目工作目录下生成tsak.josn和launch.json文件&#xff1a; 如…

Android rtmp 低延迟直播方案:简介

Android rtmp 低延迟直播方案:简介 Android RTMP 低延迟直播方案:使用 RTMP 推送至 ZLMediaKit,通过 WebRTC 进行拉流。

【eNSP】VLAN基础配置

一、基于接口划分VLAN&#xff08;Access接口和Trunk接口&#xff09; 1、创建VLAN LSW1 [LSW1]vlan batch 10 20 Info: This operation may take a few seconds. Please wait for a moment...done.LSW2 [LSW2]vlan batch 10 20 Info: This operation may take a few second…

【网络】UDP和TCP套接字编程

目录 一、初始ip地址和port二、网络字节序三、socket编程1、sockaddr结构2、socket编程接口2.1、创建 socket接口2.2、绑定端口号2.3、监听socket2.4、接收请求2.5、建立连接2.6、收消息2.7、发消息 3、UDP套接字编程 -- 现实大小写转换4、TCP套接字编程 -- 原生多线程现实TCP通…

若依微服务前后端部署启动流程(只记录)

若依官网&#xff1a;https://www.ruoyi.vip/ 若依源码下载&#xff0c;直接zip既可&#xff1a;RuoYi-Cloud: &#x1f389; 基于Spring Boot、Spring Cloud & Alibaba的分布式微服务架构权限管理系统&#xff0c;同时提供了 Vue3 的版本 下载解压&#xff0c;导入 idea&…

从零开始学习 Java:简单易懂的入门指南之IO序列化、打印流、压缩流(三十三)

序列化、打印流、压缩流、工具包 1. 序列化1.1 概述1.2 ObjectOutputStream类构造方法序列化操作 1.3 ObjectInputStream类构造方法反序列化操作1反序列化操作2 1.4 练习&#xff1a;序列化集合案例分析案例实现 2. 打印流2.1 概述2.2 PrintStream类构造方法改变打印流向 3. 压…

Docker Mysql实战:docker compose 搭建Mysql

1、docker-compose-mysql文件准备 进入/home/docker目录&#xff0c;新建docker-compose-mysql.yml文件&#xff0c;内容如下&#xff1a; version: 3.0 services:mysql:image: "mysql:5.7"container_name: "mysql"environment:MYSQL_ROOT_PASSWORD: &q…

战神引擎传奇假设教程

战神引擎传奇假设教程 --------------------------------------------------------------------------------------------------- 传奇这款游戏可以说是一代人的回忆&#xff0c;特别是8090后&#xff0c;传奇对他们有着许许多多的难忘的回忆&#xff0c; 随着时代的发展&…

【内网穿透】Docker部署Drupal并实现公网访问

目录 前言 1. Docker安装Drupal 2. 本地局域网访问 3 . Linux 安装cpolar 4. 配置Drupal公网访问地址 5. 公网远程访问Drupal 6. 固定Drupal 公网地址 前言 Dupal是一个强大的CMS&#xff0c;适用于各种不同的网站项目&#xff0c;从小型个人博客到大型企业级门户网站。…