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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 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
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
python编写爬虫小程序
2015/05/14 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
使用python实现对元素的长截图功能
2019/11/14 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
公司端午节活动方案
2014/02/04 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫