单页应用程序: SPA - Single Page Application

• 单页面应用：所有功能在一个HTML页面上实现
• 优点：按需更新性能高，开发效率高，用户体验好
• 缺点：首屏加载满，学习成本高
• 应用场景：系统类网站 / 内部网站 / 文档类网站 /移动端站点

单页面应用程序，之所以开发效率高，性能高，用户体验好，最大的原因就是：页面按需更新

路由

生活中的路由：设备和ip的映射关系

Vue中的路由：路径 和 组件 的 映射关系

VueRouter

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

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

VueRouter的使用 （5+2）

5个基础步骤：

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

npm install vue-router --save

2、引入

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

2个核心步骤

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

import Find from './views/Find.vue'
import My from './views/My.vue'
import Friend from './views/Friend.vue'
const router = new VueRouter({
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },
  ]
})

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

<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文件分2类； 页面组件 & 复用组件

注意：都是 .vue文件 (本质无区别)

页面组件 - views文件夹 => 配合路由，页面展示

复用组件 - components文件夹 => 封装复用