Vue2+Vue3基础入门到实战项目（五）——课程学习笔记

大家好， Capybara 继续与大家一起学习Vue框架。书读百遍其义自见。

day06

路由进阶

路由模块封装

router/index.js

所抽离内容包括：导入组件、（额外需要）导入Vue、导入VueRouter插件、

创建路由对象、导出路由对象

需要注意路径写法（推荐使用绝对路径 @代表当前src目录）

 效果：

使用router-link替代a标签实现高亮

 本质渲染还是a标签，to无需#，且能高亮

代码：

<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>
……

效果：

 本质是a元素

 自带两个可使用高亮类名：

 选中时更改背景颜色：

小结：

精确匹配&模糊匹配

关于两个类名 

在url后加上one，仍然匹配（router-link-active）

 设置 .router-link-active

 小结：

自定义匹配的类名

长有长的好处，不容易重名。 

配置代码（router/index.js）：

import Find from '@/views/Find'
import My from '@/views/My'
import Friend from '@/views/Friend'

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  // routes 路由规则们
  // route  一条路由规则 { path: 路径, component: 组件 }
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },
  ],
  // link自定义高亮类名
  linkActiveClass: 'active', // 配置模糊匹配的类名
  linkExactActiveClass: 'exact-active' // 配置精确匹配的类名
})

export default router

浏览器可看到，类名发送变化：

 小结：

声明式导航-跳转传参

 传参方式有两种：

1.查询参数传参

 点击链接，从首页跳转到搜索页，希望把链接信息传过去

 直接跳转

 （不带参数）关键字写死

 携带查询参数：

在页面获取参数：

页面显示参数：

如果想要基于参数去发送请求？

在哪发？—— created

获取参

数？this.$route.query.key

2.动态路由传参

代码：

（router/index.js）