<!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>
.v-link-active{
font-size: 20px;
color: #f60;
}
</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>

<template id="home">
<h3>我是主页</h3>
<div>
<a v-link="{path:'/home/login/zns'}">登录</a>
<a v-link="{path:'/home/reg/strive'}">注册</a>
</div>
<div>
<router-view></router-view>
</div>
</template>
<template id="news">
<h3>我是新闻</h3>
<div>
<a v-link="{path:'/news/detail/001'}">新闻001</a>
<a v-link="{path:'/news/detail/002'}">新闻002</a>
</div>
<router-view></router-view>
</template>
<template id="detail">
{{$route.params | json}} //路由器的参数
<br>
{{$route.path}}//路由器的路径
<br>
{{$route.query | json}}//获取路由器传入的参数

</template>
<script>
//1. 准备一个根组件
var App=Vue.extend();

//2. Home News组件都准备
var Home=Vue.extend({
template:'#home'
});

var News=Vue.extend({
template:'#news'
});

var Detail=Vue.extend({
template:'#detail'
});

//3. 准备路由
var router=new VueRouter();

//4. 关联
router.map({
'home':{
component:Home,
subRoutes:{
'login/:name':{
component:{
template:'<strong>我是登录信息 {{$route.params | json}}</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注册信息</strong>'
}
}
}
},
'news':{
component:News,
subRoutes:{
'/detail/:id':{
component:Detail
}
}
}
});

//5. 启动路由
router.start(App,'#box');

//6. 跳转
router.redirect({
'/':'home'
});
</script>
</body>
</html>

Vue复杂路由器的实现的更多相关文章

  1. VUE的路由器的总结

    vue的路由器,我们在使用vue进行开发的时候,是必须用到的一个vue自带的组件,下面进行vue经常的操作的一些说明 1.vue-router的安装 在命令行里面使用 cnpm install vue ...

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

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

  3. Vue 全家桶

    第 1 章:Vue 核心 1.1. Vue 的基本认识1.1.1. 官网1) 英文官网: https://vuejs.org/2) 中文官网: https://cn.vuejs.org/ 1.1.2. ...

  4. vue 快速入门 系列 —— vue-router

    其他章节请看: vue 快速入门 系列 Vue Router Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌. 什么是路由 ...

  5. Vue系列教程（三）之vue-cli脚手架的使用

    一.Vue-cli的环境准备 目的:(1)快速管理依赖 (2)确定项目结构 1.安装node.js Node.js是一个可以让前端运行在服务器上的一个工. 下载:https://nodejs.org/ ...

  6. Vue路由器的简单实现

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  8. Vue.js——vue-router 60分钟快速入门

    概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...

  9. vue小总结

    以下是我在使用vue过程中自己对vue的一些小总结,希望对学习vue的亲们能有所帮助: 1.   http的post请求: this.$http({url: '/someUrl', method: ' ...

随机推荐

  1. fiddler抓包小技巧之自动保存抓包数据（可根据需求过滤）

    首先 选择 如果有别的提示的话,你就按着提示走,就会安装一个编辑器,叫Fiddler Script. 正常情况下,你按着上面操作之后就会出现如下界面: 完事了之后,按下Ctrl+F来查找OnBefor ...

  2. tar.xz压缩工具使用（转）

    XZ压缩最新压缩率之王 xz这个压缩可能很多都很陌生,不过您可知道xz是绝大数linux默认就带的一个压缩工具. 我是在下载phpmyadmin的时候看到这种压缩格式的,phpmyadmin压缩包xz ...

  3. verilog 实现DDS

    一.DDS的原理 直接数字频率合成器(DDS),功能是通过输入频率输入字从而实现改变输出信号的频率的功能,它所利用的原理就是虽然对于一段正弦信号来说其幅度值是非线性的,但是其相位的值却是线性增加的,如 ...

  4. Java语言基础(3)

    1 算术运算符:+,-,*(乘法),/(除法),%(求余数) 1)只有相同类型的数据才可以进行算术运算,经常使用到自动类型转换和强制类型转换,把参与运算的数据转换为同一个类型,然后再进行算术运算. 案 ...

  5. Iterator、Generator、Decorator、Descriptor

    Python中的迭代器.生成器.装饰器.描述符. 可迭代对象(iterable)但凡是可以返回一个迭代器的对象都可成为可迭代对象可迭代对象实现了__iter__方法,该方法返回一个迭代器对象迭代器(i ...

  6. mysql 存储过程（二）

    存储过程(Stored Procedure): 一组可编程的函数,是为了完成特定功能的SQL语句集,经编译创建并保存在数据库中,用户可通过指定存储过程的名字并给定参数(需要时)来调用执行. 优点(为什 ...

  7. libusb-test

    /******************************************************************************** * * File Name : li ...

  8. 19.8.8 flutter 学习之创建第一个可变的Widget

    创建一个很简单的可变的Widget 效果就是点击字的时候会变化 完整代码: class CarPage extends StatefulWidget { @override _CarState cre ...

  9. Java文档查看

    对于Java学习者来说,阅读Java文档是必不可少的步骤,比如我现在想知道List接口的retianAll()方法,该怎么办呢? 当然是百度了!!! 皮一下,当然是查找Java文档了,以JDK1.7版 ...

  10. 依赖jquery的select皮肤2

    这个下拉菜单存在于body中,不会受select父级overflow的影响,同样依赖于jquery. 缺陷是如果select上的样式不是定义在class上的,不能完全获取select上的样式. 不过, ...