Vue_单页应用VS多页应用
当一个文件以.vue 结尾,它就被称为单文件组件一.多页面应用二.单页应用实现页面跳转,在以前是使用a标签链接,在Vue中,使用的是<router-link to='路由配置地址'> 进行页面跳转,和a标签差不多eg:<template><div>&l
·
当一个文件以.vue 结尾,它就被称为单文件组件
一.多页面应用
二.单页应用
实现页面跳转,在以前是使用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标签差不多)
看起来效果好像一样,但是在跳转到list页面时,并没有向后台发送request请求list页面,包括回退也不会发送请求home页面。这是为什么呢?
JS会感知到URL的变化,我们通过JS感知到url的变化后,可以用JS动态的把页面清除掉,再把下一个页面的内容挂载到当前页面,这时候路由不是后端来做,而是前端来做。我们判断页面到底是显示哪一个组件,然后把以前的组件清除掉,再显示新的组件就可以了。这种过程就是单页应用的处理过程,不会每次跳跃的时候请求HTML文件了。
单页应用的优点:
因为没有HTTP请求,所以页面切换的非常快。
缺点是:首屏是发送一个HTML和JS,两者都请求成功才展示,所以会比较慢
我们可以通过服务器端渲染,完美的展示单页面应用,对我们前端的开发是一个非常完美的解决方案。
更多推荐
已为社区贡献21条内容
所有评论(0)