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


Posted in Javascript onNovember 07, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 #Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 #Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 #Javascript
vue 运用mock数据的示例代码
Nov 07 #Javascript
vue环境搭建简单教程
Nov 07 #Javascript
用Webpack构建Vue项目的实践
Nov 07 #Javascript
vue双花括号的使用方法 附练习题
Nov 07 #Javascript
You might like
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
PHP类的特性实例分析
2016/09/28 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python重新引入被覆盖的自带function
2014/07/16 Python
python黑魔法之编码转换
2016/01/25 Python
python实现批量修改文件名代码
2017/09/10 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
如何使用python代码操作git代码
2020/02/29 Python
python搜索算法原理及实例讲解
2020/11/18 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
技术总监的工作职责
2013/11/13 职场文书
机械专业求职信
2014/05/25 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
防汛通知
2015/04/25 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL