Vue--声明式导航

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

1.需求

实现导航高亮效果

68249204474

如果使用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属性添加高亮样式即可实现功能

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

当我们使用跳转时，自动给当前导航加了两个类名

68249312105

1.router-link-active

模糊匹配（用的多）

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

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

2.router-link-exact-active

精确匹配

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

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

三、声明式导航-自定义类名（了解）

1.问题

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

68249361091

2.解决方案

我们可以在创建路由对象时，额外配置两个配置项即可。 linkActiveClass和linkExactActiveClass

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

68249372945

3.代码演示

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

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

1.目标

在跳转路由时，进行传参

在这里插入图片描述

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

2.跳转传参

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

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

3.查询参数传参

如何传参？
如何接受参数

固定用法：$route.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 {}</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中，获取路由参数console.log(this.$route.query);}}</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 }]
})// /search/:words  表示必须要传参数。如果不传参数，也希望匹配，可以加个可选符"？"
const router = new VueRouter({routes: [...{ path: '/search/:words?', component: Search }]
})

配置导航链接

to=“/path/参数值”
对应页面组件接受参数

$route.params.参数名

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

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

查询参数传参 (比较适合传多个参数)
1. 跳转：to=“/path?参数名=值&参数名2=值”
2. 获取：$route.query.参数名
动态路由传参 (优雅简洁，传单个参数比较方便)
1. 配置动态路由：path: “/path/:参数名”
2. 跳转：to=“/path/参数值”
3. 获取：$route.params.参数名
注意：动态路由也可以传多个参数，但一般只传一个