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 相关文章推荐
最佳JS代码编写的14条技巧
Jan 09 Javascript
js和php如何获取当前url的内容
Sep 22 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
详解Angular2响应式表单
Jun 14 Javascript
Js经典案例的实例代码
May 10 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 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 在文件指定行插入数据的代码
2010/05/08 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
新闻内页-JS分页
2006/06/07 Javascript
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
JS通过位运算实现权限加解密
2018/08/14 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
python 读取二进制 显示图片案例
2020/04/24 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
小学生春游活动方案
2014/08/20 职场文书
售后客服个人自我评价
2014/09/14 职场文书
新党章的学习心得体会
2014/11/07 职场文书
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python