Vue路由器的简单实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<script src="bower_components/vue-router/dist/vue-router.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<a v-link="{path:'/home'}">主页</a>
</li>
<li>
<a v-link="{path:'/news'}">新闻</a>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
<script>
//1. 准备一个根组件
var App=Vue.extend();
//2. Home News组件都准备
var Home=Vue.extend({
template:'<h3>我是主页</h3>'
});
var News=Vue.extend({
template:'<h3>我是新闻</h3>'
});
//3. 准备路由
var router=new VueRouter();
//4. 关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
});
//5. 启动路由
router.start(App,'#box');
//6. 跳转
router.redirect({//设置跳转页面
'/':'home'
});
</script>
</body>
</html>
Vue路由器的简单实现的更多相关文章
- angular4.0和angularJS、react.js、vue.js的简单比较
angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 ang ...
- 基于vue.js的简单用户管理
功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...
- cisco路由器 三层交换机简单环境配置实例(图)
出处:http://www.jb51.NET/softjc/56600.html cisco路由器&三层交换机简单环境配置实例 一.网络拓扑图: 二.配置命令: 1.路由器的配置: inter ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- 前台vue的使用简单小结
前台vue的使用简单小结 本项目要求:安装有node.js 6.0以及以上安装npm使用vue.js官方安装方法初始化项目npm install安装VueResurce:npm install vue ...
- axios在Vue中的简单应用（一）
1.安装axios: npm install --save axios vue-axios 2.安装qs: qs.stringify(data)可以解决data数据格式问题 npm install - ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客
koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...
- Vue路由器的hash和history两种工作模式 && Vue项目编译部署
1 # 一.Vue路由器的两种工作模式 2 # 1.对于一个uri来说,什么是hash值? 井号及其后面的内容就是hash值. 3 # 2.hash值不会包括含在HTTP请求中,即:hash值不会带给 ...
随机推荐
- JAVA核心技术--继承（1）
1.继承:向上追溯,对同一批类的抽象,延续和扩展父类的一切信息! 1)关键字:extends 例如,父类是Animal,子类是Dog; eg: public class Dog exte ...
- el-table + el-form实现可编辑表格字段验证
表格输入信息很常见,因此表格的验证也很必要,el-form提供了输入框验证.可以和表格结合起来用,使用效果 HTML: <div class="table_box"& ...
- 3、Eclipse 的SVN 插件
3.Eclipse 的SVN 插件 3.1 简介 Subversive Eclipse 团队开发的SVN 插件. Subclipse Apache 的SVN 团队开发的Eclipse 插件. 3.2 ...
- poj 2081 Recaman's Sequence (dp)
Recaman's Sequence Time Limit: 3000MS Memory Limit: 60000K Total Submissions: 22566 Accepted: 96 ...
- python-迭代器与生成器3
python-迭代器与生成器3 迭代器可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.tuple.dict.set.str等: 一类是generator,包括生成器和带 ...
- 标准模板库（STL）
组件: 容器:管理某类对象的集合. 迭代器:用来在一个对象集合内遍历元素. 算法:处理集合内的元素. 容器 序列式容器:顾名思义.array,vector,deque,list 和 forward_l ...
- iscsi原理
iscsi原理 一,[名词解释] SCSI:小型计算机系统接口,SCSI作为i输入/输出接口, FC:光纤通道 DAS:直连式存储,指将存储设备通过SCSI接口或光纤通道直接连到一台计算机上. NAS ...
- tornada-模板
tornado模板 1.配置模板路径 (project/config.py) # coding=utf-8 import os BASE_DIRS = os.path.dirname(__file__ ...
- Python基础编程：字符编码、数据类型、列表
目录: python简介 字符编码介绍 数据类型 一.Python简介 Python的创始人为Guido van Rossum.1989年圣诞节期间,在阿姆斯特丹,Guido为了打发圣诞节的无趣,决心 ...
- DOS批处理中%~dp0等扩充变量语法详解
有时候我们看到别人使用%~dp0 ~是扩展的意思,相当于把一个相对路径转换绝对路径%0代指批处理文件自身%1表示批处理文件命令行接收到的第一个参数,%2表示第二个,以此类推%~d0 是指批处理所在的盘 ...