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 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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/10/09 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
javascript的函数
2007/01/31 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
Python ZipFile模块详解
2013/11/01 Python
Python生成验证码实例
2014/08/21 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
Python几种常见算法汇总
2020/06/02 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
秋季运动会广播稿大全
2014/02/17 职场文书
关爱残疾人标语
2014/06/25 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
党员进社区活动总结
2015/05/07 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
旷工检讨书大全
2015/08/15 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书