<!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路由器的简单实现的更多相关文章

  1. angular4.0和angularJS、react.js、vue.js的简单比较

    angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 ang ...

  2. 基于vue.js的简单用户管理

    功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...

  3. cisco路由器 三层交换机简单环境配置实例(图)

    出处:http://www.jb51.NET/softjc/56600.html cisco路由器&三层交换机简单环境配置实例 一.网络拓扑图: 二.配置命令: 1.路由器的配置: inter ...

  4. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  5. 前台vue的使用简单小结

    前台vue的使用简单小结 本项目要求:安装有node.js 6.0以及以上安装npm使用vue.js官方安装方法初始化项目npm install安装VueResurce:npm install vue ...

  6. axios在Vue中的简单应用（一）

    1.安装axios: npm install --save axios vue-axios 2.安装qs: qs.stringify(data)可以解决data数据格式问题 npm install - ...

  7. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  8. 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客

    koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...

  9. Vue路由器的hash和history两种工作模式 && Vue项目编译部署

    1 # 一.Vue路由器的两种工作模式 2 # 1.对于一个uri来说,什么是hash值? 井号及其后面的内容就是hash值. 3 # 2.hash值不会包括含在HTTP请求中,即:hash值不会带给 ...

随机推荐

  1. css复杂动画（animation属性）

    1.声明:@keyframes name{   }: 2.涉及到的属性 animation-name:动画名称 animation-duration:单次动画总时长 animation-timing- ...

  2. 帝国 cms 修改登录次数的两种方法

    1.找到数据库表 注:我把这里的5改成50了. 2.找打e ==>> config ==>>  config.php ==>> loginnum的5修改一下即可

  3. @babel/traverse 使用方法小记

    @babel/traverse 官网: https://babeljs.io/docs/en/babel-traverse github:https://github.com/babel/babel/ ...

  4. python异步IO编程(二)

    python异步IO编程(二) 目录 开门见山 Async IO设计模式 事件循环 asyncio 中的其他顶层函数 开门见山 下面我们用两个简单的例子来让你对异步IO有所了解 import asyn ...

  5. 安装MySQL数据库并开启远程访问

    一.安装MySQL数据库 MySQL安装在系统盘下(C:\Program Files),方便系统备份. 1.双击安装程序,勾选“I accept the license terms”,点击“Next” ...

  6. idea逆向生成hibernate工程

    1.创建maven工程 2.在resources下创建hibernate.cfg.xml文件 <?xml version='1.0' encoding='utf-8'?> <!DOC ...

  7. LINUX修改path环境变量

    PATH用作运行某个命令的时候,本地查找不到某个命令或文件,会到这个声明的目录中去查找. 例如一般设定java的时候为了在任何目录下都可以运行bin文件夹下的命令.就将java的bin目录声明到pat ...

  8. 如何删掉git版本库master分支的第一个commit

    这个操作会将库清空,一般来说在建库开始的时候操作. 适用场景: git init初始化版本库之后,提交第一个点之后发现这个点出问题了,但是此时内心如果有洁癖的话, 你会觉得不完美,很想把这个点干掉重来 ...

  9. 使用sproxy.exe访问基于soap的webservice

    使用vc访问基于soap的webservice有多种方法,其中有一种是使用atlsoap,关于这个可以搜索sproxy.exe文章,不在这介绍(主要是我的写作能力太差).我写这个日记主要是项记录访问w ...

  10. 第四章 生命周期函数--36 结合Node手写JSONP服务器剖析JSONP原理