一、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>

  <div id="container">

        <p>{{msg}}</p>

<!--通过router-view指定盛放组件的容器  -->

        <router-view></router-view>

    </div>

    <script>

        var testLogin = Vue.component("login",{

            template:`

                <div>

                    <h1>这是我的登录页面</h1>

                </div>

            `

        })

        var testRegister = Vue.component("register",{

            template:`

                <div>

                    <h1>这是我的注册页面</h1>

                </div>

            `

        })

        //配置路由词典

        //对象数组

        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>

  <div id="container">

        <p>{{msg}}</p>

        <router-view></router-view>

    </div>

    <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:`

                <div>

                    <h1>这是收藏页</h1>

                </div>

            `

        })

        var testDetail = Vue.component("detail",{

            template:`

                <div>

                    <h1>这是详情页</h1>

                </div>

            `

        })

        var testOrder = Vue.component("order",{

            template:`

                <div>

                    <h1>这是订单页</h1>

                </div>

            `

        })

        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>

SPA（single page application）的更多相关文章

  1. 一种SPA（单页面应用）架构

    (如果对SPA概念不清楚的同学可以先自行了解相关概念) 平时喜欢做点小页面来玩玩,并且一直采用单页面应用(Single Page Application)的方式来进行开发.这种开发方式是在之前一年做的 ...

  2. Single Page Application

    single page web application,SPA,就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序.   单页Web应用(si ...

  3. java：sso（单点登录（single sign on），jsp文件动静态导入方式，session跨域）

    1.jsp文件导入: 2.session跨域: 3.sso(单点登录(single sign on): sso Maven Webapp: LoginController.java: package ...

  4. 单一职责原则（Single Responsibility Principle）

    单一职责原则(SRP:The Single Responsibility Principle) 一个类应该有且只有一个变化的原因. There should never be more than on ...

  5. 网页细分图结果分析（Web Page Diagnostics）

    Discuz开源论坛网页细分图结果分析(Web Page Diagnostics) 续LR实战之Discuz开源论坛项目,之前一直是创建虚拟用户脚本(Virtual User Generator)和场 ...

  6. LR实战之Discuz开源论坛——网页细分图结果分析（Web Page Diagnostics）

    续LR实战之Discuz开源论坛项目,之前一直是创建虚拟用户脚本(Virtual User Generator)和场景(Controller),现在,终于到了LoadRunner性能测试结果分析(An ...

  7. spa（单页面应用）的优缺点[转]

    优点:spa(单页面应用)1.用户体验好.快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染.2.基于上面一点,SPA相对对服务器压力小.缺点:1: seo 不利于搜索引擎优化2: 初 ...

  8. sso（single sign on）

    sso系统使用 https://www.cnblogs.com/shuai-server/p/8987070.html 一:什么是sso(single sign on) ? sso(单点登录系统)简单 ...

  9. 单一指责原则（Single Responsibility Principle） SRP

    using System; using System.Collections.Generic; using System.Text; namespace SingleResponsibilityPri ...

随机推荐

  1. windows2008R2下安装sqlserver2008R2时,点setup.exe应用程序无法打开错误代码0xc0150004

    windows2008R2下安装sqlserver2008R2时,点setup.exe应用程序无法打开错误代码0xc0150004 问题截图: 网上查的答案都是需要安装.net framework 3 ...

  2. Spring学习之设计模式，动态代理和gclib动态代理

    传统的代理模式是静态代理,也就是在方法区域中写入方法. 而动态代理的作用是,不修改实现类的代码,能够在代码的前后或者抛出异常的前后执行某个方法. 动态代理类的实现 //Interface public ...

  3. pytho xml

    转载自:https://www.cnblogs.com/gouguoqilinux/p/9168332.html xml是实现不同语言或程序直接进行数据交换的协议,跟json差不多,单json使用起来 ...

  4. 解决bootstrap下的图片自适应问题

    .img-responsive { display: block; height: auto; max-width: 100%; }

  5. 前端每日实战：157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画（实际上每一行都是平行的）

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...

  6. 树莓派Zero W无键盘无屏幕初始化

    买了个树莓派Zero W,结果发现没mini hdmi线 淘宝了一根mini hdmi,等了5天,拿到手后发现zero还没地接键盘,这下脑袋大了 查了下资料,发现树莓的系统,可以这boot分区中加入一 ...

  7. 对Node.js 中的依赖管理的研究-----------------引用

    nodejs依赖:  dependencies   devDependencies   peerDependencies  bundledDependencies  optionalDependenc ...

  8. 对elementui整体设计分析-------引用

    1.需求分析 丰富的 feature:丰富的组件,自定义主题,国际化. 文档 & demo:提供友好的文档和 demo,维护成本小,支持多语言. 安装 & 引入:支持 npm 方式和 ...

  9. requestAnimationFram

    window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画.该方法需要传入一个回调函数作为参数,该回调函数会 ...

  10. 对js数组去重的研究

    1.利用es5 let arr = [1, 2, 3, 4, 5, 6, 7, 1, 2, 3] const unique=arr=>{ return Array.from(new Set(ar ...