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 按键盘上的enter事件
May 11 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
js实现简单数字变动效果
Nov 06 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
JavaScript实现简单计时器
Jun 22 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模板中出现空行解决方法
2011/03/08 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
解读! Python在人工智能中的作用
2017/11/14 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
python八皇后问题的解决方法
2018/09/27 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
python程序输出无内容的解决方式
2020/04/09 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
校园歌手大赛策划书
2014/01/17 职场文书
2016年春节慰问信息
2015/03/25 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python
python​格式化字符串
2022/04/20 Python