angular实现spa单页面应用实例


Posted in Javascript onJuly 10, 2017

本篇文章是对单页面的一个简单的基本逻辑操作,这个方法可以搭建基本的单页面的逻辑结构。

简单理解:单页面应用,锚点值切换,一个路由对应一个页面。

路由:此时会创建一个信息保存路由的信息,之后对页面a标签进行操作,会进入路由表中查找与之匹配的路由信息。

----html

<div>

    <a href='#/news'>跳转到news</a>

    <a href='#/share'>跳转到share</a>

    <router-view></router-view>

</div>

----script

var router=new VueRouter({

    routes:[

        {name:'news',path:'/news',component:news},

        {name:'share',path:'/share',component:share}

    ]

})  

 

 

var vm=new Vue({

     el:'#app',

     router:router,

     data:{

     }

})

如上代码所示:由于a标签对应的跳转的路由地址,之后,我们就需要在路由中配置跳转的路由对应的跳转的页面。当然我们不能忘记new一个vue来进行绑定。

 所以以上代码中在html页面中点击文字对应标签跳转时,会去路由表中找与之匹配的路由。之后,通过路由的comonent的值找到当前组件,进行加载,该组件中(所有初始化完成之后才会created的创建方法)

如下所有的share中的方法初始化完,才会进行created的方法。

var share=Vue.component('share',{

//自定义一个全局变量,用来接收传送过来的值,进行展示

    data(){

        title:''

    },

//这个方法是在组件加载完成之后调用

    created(){

        this.title=this.$route.params.id;

    },

//接收传入的值

    props:['id'],

//组件内部的模板

    template:'<h1>share-----{{title}}</h1>'

})

注意path要写对,防止路由表中能够找到。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自己的js工具 Event封装
Aug 21 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
JavaScript对象学习小结
Sep 02 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 #Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 #Javascript
vue.js实现备忘录功能的方法
Jul 10 #Javascript
AugularJS从入门到实践(必看篇)
Jul 10 #Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 #Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 #Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 #Javascript
You might like
PHP生成静态页面详解
2006/12/05 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
php curl 上传文件代码实例
2015/04/27 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
用js遍历 table的脚本
2008/07/23 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
餐饮部总监岗位职责范文
2014/02/13 职场文书
12月红领巾广播稿
2014/02/13 职场文书
预备党员表决心书
2014/03/11 职场文书
学校联谊协议书
2014/09/16 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
生日寿星公答谢词
2015/09/29 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书