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

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

一、SPA的概述http://

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

SPA的工作原理：

eg:  http://127.0.0.1/index.html#/start

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

　　加载index.html

②根据地址栏中url解析#后的路由地址： start

　　根据路由地址，去在当前应用的配置中 找该路由地址的配置对象去查找该路由地址 所对应的模板的页面地址

　　发起异步请求加载该页面地址

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

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

①引入对应的vue-router.js(该文件我已经上传到我的文件中)

②指定一个盛放代码片段的容器

③创建业务所需要的各个组件

④配置路由词典

每一个路由地址的配置对象（要加载哪个页面...）

const myRoutes = [

　　{path:'/myLogin',component:TestLogin},

　　{path:'/myRegister',component:TestRegister}

　　]

　　const myRouter = new VueRouter({

　　routes:myRoutes

　　})

　　new Vue({

　　　　router:myRouter

　　})

⑤测试

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

{{msg}}

{{msg}}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。