vue-router插件作用 修改地址栏路径时，切换显示匹配的组件

说明 Vue 官方的一个路由插件，是一个第三方包

官网 https://v3.router.vuejs.org/zh/

VueRouter的使用（5+2）

一、固定5个固定的步骤

固定5个固定的步骤（不用死背，熟能生巧）

1. 下载 VueRouter 模块到当前工程，版本3.6.5

   Vue2对应的是3.6.5版本，口诀：2 3 3（Vue2 VueRouter3.x Vuex3.x），3 4 4（Vue3，VueRouter4.x，Vuex4.x）

   yarn add vue-router@3.6.5
   

2. main.js中引入VueRouter

   import VueRouter from 'vue-router'
   

3. 安装注册

   由于VueRouter是Vue的插件，所以在实际使用的时候，Vue相关的插件是需要安装注册之后再使用的，这个安装注册内部，它会帮你去进行一些组件的全局注册，说白了就是在进行插件的初始化

   Vue.use(VueRouter)
   

4. 创建路由对象

   const router = new VueRouter()
   

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

   虽然在路由对象里面没有配任何的规则，但是当你注入的那一刻开始，就代表着这个Vue实例已经被我们的VueRouter接管了！

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

当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了

---

二、代码示例

main.js

// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// yarn add vue-router@3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中，建立关联import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化const router = new VueRouter()new Vue({render: h => h(App),// 简写：routerrouter: router
}).$mount('#app')

---

三、两个核心步骤

这两个步骤就是不同的项目配置起来不一样的

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

   平时组件我们会放在components目录，但是在路由中，推荐放到views（视图）目录

   如果需要往VueRouter中配规则，就需要往里面写个对象，并且对象中含有routes字段

   数组中包含的每一个对象就是一个规则，path中使用的是地址栏的绝对路径，是没有.的

   

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

   App.vue

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

组件名只有一个单词时会报错

解决办法：目的就是告诉Vue组件的名字是由多个单词组成的，以 Friend组件 为例

<template><div><p>我的朋友</p><p>我的朋友</p><p>我的朋友</p><p>我的朋友</p></div>
</template><script>
export default {name: 'MyFriend'
}
</script><style></style>

---

四、完整代码

main.js

import Vue from 'vue'
import App from './App.vue'// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中，建立关联// 2个核心步骤
// 1. 建组件(views目录)，配规则
// 2. 准备导航链接，配置路由出口(匹配的组件展示的位置) 
import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'
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 },]
})Vue.config.productionTip = falsenew Vue({render: h => h(App),router
}).$mount('#app')

---

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>