vue-router的一个小实例
非2.0的
vue2.0还有vue-router2.0的改变还是挺大的
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。
现在以一个简单的单页面应用开启vue-router之旅,这个单页面应用有两个路径:/home和/about,与这两个路径对应的是两个组件Home和About。
1. 创建组件
首先引入vue.js和vue-router.js:
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
然后创建两个组件构造器Home和About:
// 定义组件
var Home = Vue.extend({
template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
data: function() {
return {
msg: 'Hello, vue router!'
}
}
})
var About = Vue.extend({
template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
})
2. 创建Router
var router = new VueRouter()
调用构造器VueRouter,创建一个路由器实例router。
3. 映射路由
router.map({
'/home': {
component: Home
},
'/about': {
component: About
}
})
调用router的map方法映射路由,每条路由以key-value的形式存在,key是路径,value是组件。
例如:'/home'是一条路由的key,它表示路径;{component: Home}则表示该条路由映射的组件。
4. 使用v-link指令
<div class="content">
<!-- 使用指令 v-link 进行导航。 -->
<a class="select" v-link="{ path: '/home' }">Home</a>
<a class="select" v-link="{ path: '/about' }">About</a>
</div>
在a元素上使用v-link指令跳转到指定路径。
5. 使用<router-view>标签
<router-view></router-view>
在页面上使用<router-view></router-view>标签,它用于渲染匹配的组件。
6. 启动路由
var App = Vue.extend({}) router.start(App, '#app')
路由器的运行需要一个根组件,router.start(App, '#app') 表示router会创建一个App实例,并且挂载到#app元素。
注意:使用vue-router的应用,不需要显式地创建Vue实例,而是调用start方法将根组件挂载到某个元素。
http://blog.csdn.net/sinat_17775997/article/details/52549123
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>router</title>
<style type="text/css">
html,body{
width: %;
height: %
}
#app{
width: %;
height: %;
margin: auto;
}
.content{
width: 300px;
height: 50px;
}
.select{
display: inline-block;
line-height: 50px;
padding: 30px;
font-size: 20px;
background-color: #ffffff;
border: 1px solid #ecf0f1;
text-align: center;
color: #;
text-decoration:none;
}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
</head>
<body>
<div id="app">
<h1 class="title">Welcome!</h1>
<div class="content">
<!-- 使用指令 v-link 进行导航。 -->
<a class="select" v-link="{ path: '/home' }">Home</a>
<a class="select" v-link="{ path: '/about' }">About</a>
</div>
<!-- 路由外链 -->
<router-view></router-view>
</div>
<script type="application/javascript">
// 定义组件
var Home = Vue.extend({
template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
data: function() {
return {
msg: 'Hello, vue router!'
}
}
})
var About = Vue.extend({
template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
}) // 创建一个路由器实例
// 创建实例时可以传入配置参数进行定制,为保持简单,这里使用默认配置
var router = new VueRouter() // 定义路由规则
// 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend
// 创建的组件构造函数,也可以是一个组件选项对象。
router.map({
'/home': {
component: Home
},
'/about': {
component: About
}
}) router.redirect({
'/': '/home'
}) // 路由器需要一个根组件。
// 出于演示的目的,这里使用一个空的组件,直接使用 HTML 作为应用的模板
var App = Vue.extend({}) // 启动应用!
// 路由器会创建一个 App 实例,并且挂载到选择符 #app 匹配的元素上。
router.start(App, '#app')
</script>
</body>
</html>
vue-router的一个小实例的更多相关文章
- Jmeter Web 性能测试入门 (四):一个小实例带你学会 Jmeter 脚本编写
测试场景: 模拟并发100个user,在TesterHome 站内搜索VV00CC 添加线程组 添加HTTP信息头管理器 添加HTTP Sampler 填写HTTP Sampler中的信息 添加监听器 ...
- 一个小实例理解js 原型和继承
导语1:一个构造函数的原型对象,其实就是这个构造函数的一个属性而已,属性名叫prototype,值是一个对象,对象中有一些属性和方法,所以每个构造函数的实例对象都拥有这些属性和方法的使用权. 导语2: ...
- php中引用&的一个小实例
在百度知道上碰到一段关于php的引用符&的代码,对于初学都来说还是很考验理解分析能力的,把代码和自己的分析贴上来作一个备份,也与大家共勉. 代码片段: $arr =array(1,2,3,4) ...
- 从一个简单的小实例分析JSP+Servelt与JSP+Struts2框架的区别
最近在学struts2,struts2相比以前的JSP+Servlet,在处理流程上的更简单,我们就一个小实例来具体分析一下. 实例内容如下: 实现一个简单的注册页面包括:用户名.密码.重复密码.年龄 ...
- canvas实践小实例二 —— 扇形
俗话说:发图不留种,菊花万人捅!我这里想延伸一下:教学不给例,说你是傻逼!哎呀,还挺押韵,嘻嘻,开个玩笑! 我们都讲了四期API的知识了,估计大家看的也是枯燥的很啊,前面的小实例也是太简单,简直不解渴 ...
- WCF小实例以及三种宿主
WCF小实例以及三种宿主 最近一直在学习WCF相关知识,下面将通过一个小实例对所学的知识进行简单的回顾:本实例是一个简单三层操作数据库,并且也简单实现的三种宿主(控制台宿主,IIS宿主以及Window ...
- ssh框架的小实例(用户登录)
刚学SSH框架写一个小实例,以便以后查看: 本案例简单的实现一个用户登录: 数据库方面就不写了,自己领悟吧!哈哈(根据user.hbm.xml文件就知道了) 我们一般可以创建下面几个包,什么意思呢,自 ...
- javascript小实例,拖拽应用(一)
前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...
- django Form 表单 总结与小实例
开头寄语: 这几天一直在看Django的form表单验证,然后想对于这几天要有个总结. 首先,先来看一下找到的一个form表单验证的流程: 验证过程 流程详解1. 函数full_clean()依次调用 ...
随机推荐
- Mybatis在Maven项目中使用
Mybatis概览 ORM是什么? ORM是Object Realtion Mapping的缩写,顾名思义,即对象关系映射. ORM是一种以面向对象的方式来进行数据库操作的技术.Web开发中常用的语言 ...
- oracle入门(8)——实战:支持可变长参数、多种条件、多个参数排序、分页的存储过程查询组件
[本文介绍] 学了好几天,由于项目需要,忙活了两天,写出了个小组件,不过现在还只能支持单表操作.也没考虑算法上的优化,查询速度要比hibernate只快了一点点,可能是不涉及多表查询的缘故吧,多表的情 ...
- win下如何解决在chrome的同源访问问题
引子:本来是想验证如果在网页中包含多个框架,那么就会存在两个以上的不同全局环境,如果从一个框架引用另一个框架的数据比如数组a,那么用 instanceof 判断这个数组a是不是另个框架Array的实例 ...
- data.table进阶
上一篇讲述了data.table数据分析的一些基本方法,但是最近在用作数据分析时,发现在面对一些复杂场景时,这些基本的用法已经不能满足业务需求了,所以此篇就介绍data.table更进一步的用法. 先 ...
- OOM问题分析
一.背景 在实际的开发中,性能问题的分析一直是运维团队的痛点,无论是缓慢内存溢出还是迅速的内存爆炸,对系统和业务的破坏都是快速而巨大的,此贴分享下简单的分析内存问题的经验. 二.相关名词 分代:根据对 ...
- 5-es6的模块化开发与其它的不同
1.加载机制不同es是静态加载,其它是动态加载.Es6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量.CommonJS 和 AMD.CMD 模块,都只能在运行 ...
- cdoj1588 潘爷泡妹
地址:http://acm.uestc.edu.cn/#/problem/show/1588 题目:复制过来发现有问题,自己去cdoj看吧 思路: 1.先进行多次spfa跑出所有人之间的相互到达所需要 ...
- JVM年轻代(转)
本文转自:http://my.oschina.net/xishuixixia/blog/133850 1.为什么会有年轻代 我们先来屡屡,为什么需要把堆分代?不分代不能完成他所做的事情么?其实不分代完 ...
- zookeeper curator客户端之增删改查
zookeeper curator客户端之增删改查 zookeeper安装:https://www.cnblogs.com/zwcry/p/10272506.html curator客户端是Apach ...
- java第四周学习总结
学号20145336 <Java程序设计>第4周学习总结 教材学习内容总结 继承 继承符合(Don't Repeat Yourself)原则,即在自己的代码中不要重复自己编写的信息,这在多 ...