Vue_单页应用VS多页应用

古城微笑少年丶 2022-05-21 01:08 375阅读 0赞

当一个文件以.vue 结尾，它就被称为单文件组件  
一.多页面应用  
![这里写图片描述][70]  
二.单页应用  
实现页面跳转，在以前是使用a标签链接，在Vue中，使用的是`<router-link to='路由配置地址'>` 进行页面跳转，和a标签差不多  
eg：

<template>
    <div>
      <div class='Home'>
            <p>hello home</p>
            <router-link to='/list'>跳转到列表页</router-link>
      </div>
    </div>
    </template>
    <script> export default { name: 'Home' } </script>
    <style> </style>

效果：点击跳转到列表页就会跳转到list页面（和a标签差不多）  
![这里写图片描述][70 1]  
看起来效果好像一样，但是在跳转到list页面时，并没有向后台发送request请求list页面，包括回退也不会发送请求home页面。这是为什么呢？  
JS会感知到URL的变化，我们通过JS感知到url的变化后，可以用JS动态的把页面清除掉，再把下一个页面的内容挂载到当前页面，这时候路由不是后端来做，而是前端来做。我们判断页面到底是显示哪一个组件，然后把以前的组件清除掉，再显示新的组件就可以了。这种过程就是单页应用的处理过程，不会每次跳跃的时候请求HTML文件了。  
单页应用的优点：  
![这里写图片描述][70 2]  
因为没有HTTP请求，所以页面切换的非常快。  
缺点是：首屏是发送一个HTML和JS，两者都请求成功才展示，所以会比较慢  
我们可以通过服务器端渲染，完美的展示单页面应用，对我们前端的开发是一个非常完美的解决方案。

[70]: /images/20220521/079d51ae66ca4ffba5b85557db61948a.png
[70 1]: /images/20220521/a952d0b620ba4634a92ab7b5967a5566.png
[70 2]: /images/20220521/77839ad25adf4d72afd58272b3d6cda5.png