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 相关文章推荐
jQuery 中关于CSS操作部分使用说明
Jun 10 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
JS简单获得节点元素的方法示例
Feb 10 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
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
python cs架构实现简单文件传输
2020/03/20 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
网上签名寄语活动留言
2014/01/18 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
户籍证明书标准模板
2014/09/10 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js