vue中SPA单页面应用程序详解

前端之家收集整理的这篇文章主要介绍了vue中SPA单页面应用程序详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、SPA的概述

SPA(single page application)单页面应用程序,在一个完成的应用或者站点中,只有一个完整的html页面,这个页面有一个容器,可以把需要加载的代码片段插入到该容器中。

SPA的工作原理:

  eg:

①根据地址栏中url解析完整的页面:index.html   加载index.html

②根据地址栏中url解析#后的路由地址: start   根据路由地址,去在当前应用的配置中 找该路由地址的配置对象去查找该路由地址 所对应的模板的页面地址   发起异步请求加载该页面地址

③把请求来的数据加载到指定的容器中

二、通过VueRouter来实现一个SPA的基本步骤

①引入对应的vue-router.js(该文件我已经上传到我的文件中) ②指定一个盛放代码片段的容器

③创建业务所需要的各个组件 ④配置路由词典 每一个路由地址的配置对象(要加载哪个页面...)

⑤测试 在地址栏中 输入对应的不同的路由地址 确认是否能够加载对应的

<Meta charset="UTF-8">
{{msg}}

<Meta charset="UTF-8"> SPA练习
{{msg}}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/35335.html

猜你在找的Vue相关文章