1.什么是路由呢？

路由就是路径和组件之间的映射关系，当我们路径变化的时候，就要切换对应的组件。

在前端中解决路径与组件之间的映射关系，官方提供了VueRouter这个插件

2.VueRouter的作用及使用

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

VueRouter的使用分为5个步骤和特定的2步

3.下面是固定的5步：

1.下载相关插件VueRouter(本次用的都是Vue2)

使用下方命令：

npm i vue-router@3.6.5

当然 如果你曾经下载过yarn，也可以用下方命令

yarn add vue-router@3.6.5

2.引入（下面的都是在main.js中使用）

import VueRouter from 'vue-router'

3.全局安装注册

Vue.use(VueRouter)

 

4.创建路由对象

const router=new VueRouter()

 

5.注入，将路由对象注入到new Vue实例中，建立联系（这里使用简写）

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

 

 

 

4.下面的是自定义的两步，也是核心的两步

1.创建需要的组件（在views目录中），配置路由规则

这里有一个注意点：

为了防止命名规则报错，添加了name 

在main.js中配置规则

import Vue from 'vue'
import App from './App.vue'import Find from './components/views/Find.vue'
import Friend from './components/views/Friend.vue'
import My from './components/views/My.vue'import VueRouter from 'vue-router'Vue.config.productionTip = falseVue.use(VueRouter)const router=new VueRouter({//route是路径的意思，routes这里表示的是很多的路由规则//每一个路由规则都是一个对象，{path：路径，component：组件}//两个核心配置：path和 component,必填项routes:[{path:'/find',component:Find},{path:'/friend',component:Friend},{path:'/my',component:My},]
})new Vue({render: h => h(App),router
}).$mount('#app')

2.配置导航，配置路由出口（配置匹配的组件显示位置）

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

效果图