vue-6
一、声明式导航-导航链接
1.需求
实现导航高亮效果
如果使用a标签进行跳转的话，需要给当前跳转的导航加样式，同时要移除上一个a标签的样式，太麻烦！！！
2.解决方案
vue-router 提供了一个全局组件 router-link (取代 a 标签)
- 能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签 ，to 无需 #
- 能高亮，默认就会提供高亮类名，可以直接设置高亮样式
语法：
<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-active和router-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的好处是什么？
二、声明式导航-两个类名
当我们使用
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.解决方案
我们可以在创建路由对象时，额外配置两个配置项即可。 linkActiveClass和linkExactActiveClass
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.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 动态路由传参
-
查询参数传参 (比较适合传多个参数)
-
跳转：to=“/path?参数名=值&参数名2=值”
-
获取：$route.query.参数名
-
动态路由传参 (优雅简洁，传单个参数比较方便)
- 配置动态路由：path: “/path/:参数名”
- 跳转：to=“/path/参数值”
- 获取：$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 Foundh1>
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', //默认是hash
routes:[]
})
十、编程式导航-两种路由跳转方式
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钩子，帮我们实现业务需求。