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值不会带给 ...
随机推荐
- Darknet版YOLO安装与配置
Darknet配置和安装 1. 安装显卡驱动 首先查看一下自己的电脑需要怎样的驱动,我们可以先到 http://www.nvidia.com/Download/index.aspx 查询下我们需要的是 ...
- 3.1.2-arm-linux-ld选项
有文件link.S,内容如下 .text .global _start _start: b step1 step1: ldr pc, =step2 step2: b step2 经过如下命令编译 ar ...
- 【有钱的大佬看过来】Java开发学习大纲
Java开发学习大纲文档V7.0 有钱的大佬可以买下这个版权,全网最完整最详细了,没钱的大佬可以按照自己的方式去整理.有需要的私聊作者QQ:253173641 来源于-幸福的沉淀:https://ww ...
- 【AGC010 C】Cleaning
题意 有一棵 \(n\) 个点的树,第 \(i\) 个节点有 \(a_i\) 个石子. 每次都可以选择一对不同的叶子节点,这对叶子节点路径上的所有点都必须要有石子.然后去掉这两个叶子节点路径上的每个节 ...
- hive建表结构
drop table dw.fct_so;create table dw.fct_so(so_id bigint comment '订单ID',parent_so_id bigint comment ...
- redis 加锁与释放锁（分布式锁1）
使用Redis的 SETNX 命令可以实现分布式锁 SETNX key value 返回值 返回整数,具体为 - 1,当 key 的值被设置 - 0,当 key 的值没被设置 分布式锁使用 impor ...
- springboot+elasticsearch 报错
错误1: .d.e.r.s.AbstractElasticsearchRepository : failed to load elasticsearch nodes : org.elasticsear ...
- MySQL第二次安装随笔
找到之前的MySQL的安装包,重新安装MySQL. 1.设置环境变量,win10的可以右键此电脑-属性,在系统变量Path中添加mysql文件bin的路径 2.修改配置文件mydefault.ini( ...
- 程序包管理工具yum
yum 首先要有一个网络上或本地或远程的yum仓库.然后需要yum安装程序的机器去yum仓库下载yum元数据(包括包信息和依赖信息)到本地的cache里.当需要安装程序的时候,会查看yum源数据里是否 ...
- poj1952 BUY LOW, BUY LOWER[线性DP(统计不重复LIS方案)]
如题.$N \leqslant 5000$. 感觉自己思路永远都是弯弯绕绕的..即使会做也会被做繁掉..果然还是我太菜了. 递减不爽,先倒序输入算了.第一问做个LIS没什么说的.第二问统计个数,考虑什 ...