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 各种浏览器下获得日期区别
Dec 22 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 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无限分类(树形类)的深入分析
2013/06/02 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
JS创建自定义表格具体实现
2014/02/11 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
vue中轮训器的使用
2019/01/27 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
Python单链表的简单实现方法
2014/09/23 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
网络信息安全承诺书
2014/03/26 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
创业计划书之美甲店
2019/09/20 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS