目录

一、引言

1.1. 路由介绍

二、VueRouter

三、VueRouter的使用

3.1. 使用步骤（5+2）

3.2. 完整代码

3.2.1. main.js

3.2.2. App.vue

3.2.3. Friend.vue

3.2.4. My.vue

3.2.5. Find.vue

---

一、引言

1.1. 路由介绍

Vue中路由就是路径和组件的映射关系，通过指定路径和组件的对应关系，实现单页面应用中的跳转显示（即页面内容的切换）。

https://music.163.com/#/my/  My.vue组件 

https://music.163.com/#/friend  Friend.vue组件

二、VueRouter

官网地址：https://v3.router.vuejs.org/zh/

我们在Vue的开发过程中，Vue官方已经为我们提供了一个第三方路由插件，因此我们只需要在工程中安装该插件，并通过代码进行引用即可快速实现路由的功能，这个插件就是VueRouter。

VueRouter的作用就是我们前面提到的在修改地址栏路径时，切换显示匹配的组件（即页面内容）

三、VueRouter的使用

3.1. 使用步骤（5+2）

5个基础步骤

① 下载 VueRouter 模块到当前工程

② 引入

③ 安装注册

④ 创建路由对象

⑤ 注入，将路由对象注入到new Vue实例中，建立关联

2个核心步骤

① 创建需要的组件 (views目录)，配置路由规则

② 配置导航，配置路由出口(路径匹配的组件显示的位置)

3.2. 完整代码

3.2.1. main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Find from './views/Find'
import Friend from './views/Friend'
import My from './views/My'

Vue.config.productionTip = false

// 路由的使用步骤（5+2）
// 5个基础步骤
// 1.下载VueRouter模块到当前工程
// 2.引入
// 3.安装注册 Vue.use(Vue插件)
Vue.use(VueRouter)
// 4.创建路由对象
const router = new VueRouter({
  // routes 路由规则
  // route 一条路由规则 { path: 路径, component: 组件}
  routes: [
    { path: "/find", component: Find },
    { path: "/my", component: My },
    { path: "/friend", component: Friend }
  ]
})
// 5.注入到new Vue中，建立关联
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

// 2个核心步骤
// 1.建组件，配规则
// 2.准备导航链接，配置路由出口（匹配的组件展示的位置）

3.2.2. App.vue

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a>
    </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:hover {
  background-color: #555;
}
</style>

3.2.3. Friend.vue

<template>
  <div>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
  </div>
</template>

<script>
export default {
  name: 'MyFriend'
}
</script>

<style>

</style>

3.2.4. My.vue

<template>
  <div>
    <p>我的音乐</p>
    <p>我的音乐</p>
    <p>我的音乐</p>
    <p>我的音乐</p>
  </div>
</template>

<script>
export default {
  // 给组件定义一个多单词名字，避免ESLint校验时抛出组件单个单词命名的校验异常
  name: 'MyMusic'
}
</script>

<style>

</style>

3.2.5. Find.vue

<template>
  <div>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
  </div>
</template>

<script>
export default {
  name: 'FindMusic'
}
</script>

<style>

</style>