一、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. 【转】Android编译系统详解(一)——build/envsetup.sh

    出处 http://www.cloudchou.com/android/post-134.html 本文原创作者:Cloud Chou. 欢迎转载,请注明出处和本文链接 准备好编译环境后,编译Rom的 ...

  2. Centos 7 SSh--端口号的更改

    前言:开启某服务或软件的端口,要从该服务或软件监听的端口(多以修改配置文件为主),SeLinux和防火墙(FireWall)的安全策略下手.如果使用阿里云,腾讯等第三方服务器还需要对管理控制台的安全组 ...

  3. SpringCloud系列：前言

    准备写springcloud系列了,先吐槽下自己,之前准备把学到的东西写下来,都因为工作或自己太懒(主要还是懒),写了个开篇就GG了,这次springcloud一定会坚持写完.加油! 这里先说下我搭建 ...

  4. (转) weblogic 12c忘记密码

    weblogic安装后,很久不用,忘记访问控制台的用户名或者密码,可通过以下步骤来重置用户名密码. 说明:%DOMAIN_HOME%:指WebLogic Server 域(Domain)目录 我的是: ...

  5. 「prufer」

    prufer数列,可以用来解一些关于无根树计数的问题. prufer数列是一种无根树的编码表示,对于一棵n个节点带编号的无根树,对应唯一一串长度为n-1的prufer编码. (1)无根树转化为pruf ...

  6. JVM调优总结（三）——分代垃圾回收详述

    为什么要分代 分代的垃圾回收策略,是基于这样一个事实:不同的对象的生命周期是不一样的.因此,不同生命周期的对象可以采取不同的收集方式,以便提高回收效率. 在Java程序运行的过程中,会产生大量的对象, ...

  7. 【leetcode&CN&竞赛】1196.How Many Apples Can You Put into the Basket

    题目如下: 楼下水果店正在促销,你打算买些苹果,arr[i] 表示第 i 个苹果的单位重量. 你有一个购物袋,最多可以装 5000 单位重量的东西,算一算,最多可以往购物袋里装入多少苹果. 示例 1: ...

  8. ubuntu1604-Python35-cuda9-cudnn7-gpu-dockerfile

    一,在某目录下有如下文件: -rw-r--r-- 1 root root 1643293725 9月 2 11:46 cuda_9.0.176_384.81_linux.run -rw-r--r-- ...

  9. node.js入门学习（三）--npm

    一.npm介绍 1)npm:node package manager是node.js默认的以js编写的软件包管理系统 官网:www.npmjs.com 文档:docs.npmjs.com 2)提到np ...

  10. 执行jar包某类命令

    #!/bin/bash ulimit -SHn 65535 export LC_ALL=en_US.UTF-8 export LANG=en_US.UTF-8 library_path="$ ...