<!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. dedecms 列表 用分页标签 判断 当第一页则显示，第二页以上不显示 土办法！

    arc.listview.class.php function GetPageListST($list_len,$listitem="index,end,pre,next,pageno,sp ...

  2. shell awk读取文件中的指定行的指定字段

    1.awk功能和实用形式 awk指定读取文件中的某一行的某个字段 awk      可以设置条件来输出文件中m行到n行中每行的指定的k字段,使用格式如下 awk    'NR==m,NR==n {pr ...

  3. Linux排查磁盘空间顺序解决空间不足问题

    1 先查看整个磁盘的情况 df    -h                     查看整台服务器的硬盘使用情况 cd    /                       进入根目录 du   -s ...

  4. linux系统设置登录失败n次锁定账户：vim /etc/pam.d/system-auth

    auth required pam_env.so 登陆后的环境变量 auth sufficient pam_fprintd.so 指纹认证 auth sufficient pam_unix.so nu ...

  5. idea运行web项目乱码

    windows下idea中web项目乱码,主要原因是服务器端乱码(执行webservlet的时候,编码格式改变),导致客户端的编码格式与webservlet传递过的编码格式不一致. 前端网页的编码,通 ...

  6. Observer-Proxy拦截器 -ES6

    在目标对象前嫁接了一个拦截层,外界对该对象的访问都必须通过这层拦截 可实现观察者模式

  7. Vue处理跨域

    Vue处理ajax跨域 一般处理跨域有好几种方式,jsonp,document.domain, post Message...,今天我们主要来谈谈vue 通过代理方式来实现跨域 安装 npm inst ...

  8. Nginx解析PHP

    刚安装完PHP后,nginx是无法解析的,如果输入地址会直接下载文件,需要进行如下的设置 步骤 修改/etc/nginx/sites-available/default和cat /etc/nginx/ ...

  9. 什么是Web Service（Web服务）？

    从表面上看,Web Service就是一个应用程序,它向外界暴露出一个能够通过Web进行调用的API.例如可以创建一个提供天气预报的Web Service,那么无论你用哪种编程语言开发的应用都可以通过 ...

  10. C# 扩展方法——去重（Distinct）

    其他扩展方法详见:https://www.cnblogs.com/zhuanjiao/p/12060937.html IEnumerable的Distinct扩展方法,当集合元素为对象时,可用于元素对 ...