一、spa的概述
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(该文件我已经上传到我的文件中)
②指定一个盛放代码片段的容器
<router-view></router-view>
③创建业务所需要的各个组件
④配置路由词典
每一个路由地址的配置对象（要加载哪个页面...）
const myroutes = [ {path:'/mylogin',component:testlogin}, {path:'/myregister',component:testregister} ] const myrouter = new vuerouter({ routes:myroutes }) new vue({ router:myrouter })
⑤测试
在地址栏中 输入对应的不同的路由地址 确认是否能够加载对应的<!doctype html>
<html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> <!-- 引入文件 --> <script src="js/vue-router.js"></script> </head> <body> <p id="container"> <p>{{msg}}</p> <!--通过router-view指定盛放组件的容器 --> <router-view></router-view> </p> <script> var testlogin = vue.component(login,{ template:` <p> <h1>这是我的登录页面</h1> </p> ` }) var testregister = vue.component(register,{ template:` <p> <h1>这是我的注册页面</h1> </p> ` }) //配置路由词典 //对象数组 const myroutes =[ //当路由地址：地址栏中的那个路径是mylogin访问组件 //组件是作为标签来用的所以不能直接在component后面使用 //要用返回值 //path:''指定地址栏为空：默认为login页面 {path:'',component:testlogin}, {path:'/mylogin',component:testlogin}, {path:'/myregister',component:testregister} ] const myrouter = new vuerouter({ //myroutes可以直接用上面的数组替换 routes:myroutes }) new vue({ router:myrouter, //或者： /* router:new vuerouter({ routes:[ {path:'/mylogin',component:testlogin}, {path:'/myregister',component:testregister} ] }) */ el:#container, data:{ msg:hello vuejs } }) </script> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>spa练习</title> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> </head> <body> <p id="container"> <p>{{msg}}</p> <router-view></router-view> </p> <script> /* 需要大家创建一个spa，这个spa有3个组件，分别对应的是collect/detail/order 功能需求： 在地址栏中路由地址是: /mycolllect --> 收藏页组件 /mydetail --> 详情页组件 /myorder --> 订单页组件 */ /* 1、引入js文件 2、创建三个组件,需要返回值 3、路由词典配置(三小步)const myroutes、const myrouter、router:myrouter, 4、指定一个盛放代码片段的容器 <router-view></router-view> */ var testcollect = vue.component(collect,{ template:` <p> <h1>这是收藏页</h1> </p> ` }) var testdetail = vue.component(detail,{ template:` <p> <h1>这是详情页</h1> </p> ` }) var testorder = vue.component(order,{ template:` <p> <h1>这是订单页</h1> </p> ` }) const myroutes = [ {path:,component:testcollect}, {path:/mycolllect,component:testcollect}, {path:/mydetail,component:testdetail}, {path:/myorder,component:testorder}, ] const myrouter = new vuerouter({ routes:myroutes }) new vue({ router:myrouter, el:#container, data:{ msg:hello vuejs } }) </script> </body> </html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
mint-ui loadmore上拉加载与下拉刷新冲突处理方法
微信小程序怎样使图片上传至服务器
以上就是vue中spa单页面应用程序详解的详细内容。