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值不会带给 ...
随机推荐
- Vue实例：vue2.0+ElementUI框架开发pc项目
开发前准备 vue.js2.0中文,项目所使用的js框架 vue-router,vue.js配套路由 vuex,状态管理 Element,UI框架 1,根据官方指引,构建项目框架 安装vue npm ...
- Date对象中的方法
特殊说明:设置时间的方法,虽然W3C说明传参的范围,在开发过程中,传入的参数不在该范围也是可以的.例如: var t = new Date(), d = t.getDate(); //当天时间往前推2 ...
- Hadoop伪分布式重启正确流程
既然是伪分布式,那就不可避免的设计到重启Hadoop服务或者重启Hadoop服务器的情况,正确的停止和重启是很有必要的. 首先是Hadoop服务的停止,使用 ./sbin/stop-all.sh脚本来 ...
- 牛客练习赛44 A 小y的序列 （模拟，细节）
链接:https://ac.nowcoder.com/acm/contest/634/A 来源:牛客网 小y的序列 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语 ...
- keras训练大量数据的办法
最近在做一个鉴黄的项目,数据量比较大,有几百个G,一次性加入内存再去训练模青型是不现实的. 查阅资料发现keras中可以用两种方法解决,一是将数据转为tfrecord,但转换后数据大小会方法不好:另外 ...
- JavaScript 复制变量的三种方法
参考:Copying Objects in JavaScript - Orinami Olatunji(@orinamio_) October 23, 2017 直接将一个变量赋给另一个变量时, ...
- java7连接数据库 网页 添加学生信息测试
石家庄铁道大学2019年秋季 2018 级课堂测试试卷(六)(10分) 课程名称: JAVA语言程序设计 任课教师: 王建民 考试时间: 150 分钟 一. 考试要求: 1登录账号 ...
- anaconda安装失败
2019.10版本怎么安装都不行换了2018.10安装ok
- 微擎后台进行GET提交
微擎form表单进行GET提交时,要传递 name 分别为 c , a , m , do 的值 例如: <form action="{php echo $this->create ...
- C++使用socket传输图片
Client: #include <WinSock2.h> #include <Windows.h> #include <stdio.h> #pragma comm ...