1.SPA-单页应用程序
使用场景：后台管理系统/淘宝/京东首页/网易云音乐
多页应用：京东秒杀-模块
所有的功能都在一个页面上实现，第一次加载整个页面，如果需要更换数据，只需发请求更换需要更改的地方（如果有缓存，那性能更高了），用户体验好，数据传输容易，开发效率高
（进度条，loading都行，可以配一些异步组件，懒加载来解决首次加载慢的问题）
开发成本高点-需要懂路由，不利于seo
2.前端路由：
路由：指的是一种映射关系
前端路由：路径 和 组件 之间的映射关系
用途：单页应用程序开发，不同的哈希地址，切换不同的组件
比如：点击导航，路径变化后，不刷新页面，根据路径切换组件
思路：1.用户点击了页面上的路由链接2.导致了URL 地址栏中的hash地址值发生了变化
3.前端路由监听了到Hash地址的变化 4.前端路由把当前hash地址对应的组件渲染到浏览器中
原理（原生）：根据哈希值的变化，来切换不同的组件==利用window.onhanshchange= ()=>{}
<template>
<div>
<a href="#/home">首页</a>
<a href="#/mymovie">电影</a>
<a href="#/my">关于</a>
<component :is="comName"></component>
</div>
</template>
<script>
import MyHome from "./components/MyHome.vue"
import MyMovie from "./components/MyMovie.vue"
import My from "./components/My.vue"
export default {
components:{
My,
MyHome,
MyMovie
}
,data (){
return {
comName:My
}
},
created (){
// 元素hash值变化切换不同的组件，利用的时动态组件
// 会在地址栏hash值变化时会变化
// 注意箭头函数，根据不同的哈希值，切换不同的组件
window.οnhashchange=()=>{
const hash=location.hash
console.log(location.hash);
switch(hash){
case "#/home":
this.comName=MyHome
break;
case "#/mymovie":
this.comName=MyMovie
break;
case "#/my":
this.comName=My
break;
}
}
}
}
</script>
<style>
a {
margin-right: 25px;
}
</style>
原生的比较麻烦，还需要自己配规则，可以利用vue-router 插件，底层就是利用监听地址栏hash值的变化，进行组件的切换，对原生的进行了封装==vue官方提供的路由的插件，第三方的包，用于处理路由，对地址栏的哈希值进行监听，切换组件
小知识点：组件分为页面组件-用于展示的页面（views文件面或者pages文件夹里面）--一般展示的页面会拆分成一个个复用的组件-页面展示-配合路由：复用组件（components文件-封装复用）
路由的基本使用：1.下载 vue-router 2.在main.js里面引入 vue-router3.添加到Vue.use(VueRouter) 身上--会帮我们注册全局RouterLink和RouterView 组件4.创建一个路由对象 5.将路由注入到new Vue实例中 6.核心配置路由规则 7.设置路由出口 <router-view></router-view>
地址栏有#号 说明成功配置了 ==路由==里面封装的就有动态组件-用is封装过了，不用我们自己封装了
简单的记：下包/引入/注册/路由对象/注入/规则/路由出口
注意：如果想要用router-view 和router-link两个组件，必须有路由的基本操作