vue22 路由
<!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>
<!--
vue-> SPA应用，单页面应用
vue-resouce 交互
vue-router 路由
根据不同url地址，出现不同效果
咱上课: 0.7.13版本
$ bower install vue-router#0.7.13
--> <div id="box">
<ul>
<li>
<!-- href=""不能使用了 ，点击内容显示在router-view之中，-->
<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({//Home是一个类
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. 跳转，默认显示home
router.redirect({
'/':'/home' //'/':'home'
});
</script>
</body>
</html>
多层路由：
<!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点的时候会自动加这个样式*/
.v-link-active{
font-size: 20px;
color: #f60;
}
</style>
</head>
<!--
路由嵌套(多层路由): 主页 home
登录 home/login
注册 home/reg
新闻页 news
-->
<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'}">登录</a>
<a v-link="{path:'/home/reg'}">注册</a>
</div>
<div>
<router-view></router-view>
</div>
</template>
<template id="news">
<h3>我是新闻</h3>
</template>
<script>
//1. 准备一个根组件
var App=Vue.extend(); //2. Home News组件都准备
var Home=Vue.extend({
template:'#home'
}); var News=Vue.extend({
template:'#news'
}); //3. 准备路由
var router=new VueRouter(); //4. 关联
router.map({
'home':{
/*
data(){},
methods:{},
*/
component:Home,
subRoutes:{
'login':{
component:{
template:'<strong>我是登录信息</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注册信息</strong>'
}
}
}
},
'news':{
component:News
}
}); //5. 启动路由
router.start(App,'#box'); //6. 跳转
router.redirect({
'/':'home'
});
</script>
</body>
</html>
<!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}} <!--获取：后面的值 params={'id':'001'}-->
<br>
{{$route.path}} <!-- '/news/detail/002'-->
<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':{//先通过path找到component，然后找通过component找template，最后通过template找标签id页面，
component:{
template:'<strong>我是注册信息</strong>'
}
}
}
},
'news':{
component:News,
subRoutes:{
'/detail/:id':{//id是path传过来的，
component:Detail
}
}
}
}); //5. 启动路由
router.start(App,'#box'); //6. 跳转
router.redirect({
'/':'home'
});
</script>
</body>
</html>
vue22 路由的更多相关文章
- Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- nodejs进阶(3)—路由处理
1. url.parse(url)解析 该方法将一个URL字符串转换成对象并返回. url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) ...
- .NetCore MVC中的路由（2）在路由中使用约束
p { margin-bottom: 0.25cm; direction: ltr; color: #000000; line-height: 120%; orphans: 2; widows: 2 ...
- .NetCore MVC中的路由（1）路由配置基础
.NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...
- ASP.NET路由模型解析
大家好,我又来吹牛逼了 ~-＿-~ 转载请注明出处:来自吹牛逼之<ASP.NET路由模型解析> 背景:很多人知道Asp.Net中路由怎么用的,却不知道路由模型内部的运行原理,今天我就给大家 ...
- 路由的Resolve机制（需要了解promise）
angular的resovle机制,实际上是应用了promise,在进入特定的路由之前给我们一个做预处理的机会 1.在进入这个路由之前先懒加载对应的 .js $stateProvider .state ...
- Android业务组件化之子模块SubModule的拆分以及它们之间的路由Router实现
前言: 前面分析了APP的现状以及业务组件化的一些探讨(Android业务组件化之现状分析与探讨),以及通信的桥梁Scheme的使用(Android业务组件化之URL Scheme使用),今天重点来聊 ...
- ASP.NET Core的路由[5]：内联路由约束的检验
当某个请求能够被成功路由的前提是它满足某个Route对象设置的路由规则,具体来说,当前请求的URL不仅需要满足路由模板体现的路径模式,请求还需要满足Route对象的所有约束.路由系统采用IRouteC ...
随机推荐
- WordPress 自动草稿和文章修定版本
写文章的时候发现 WordPress 有两个有意思的地方, WordPress 自动草稿和文章修定版本: 1.点击创建新文章的时候,会在数据库自动生成一条草稿数据: 2.修改数据的时候会将历史文章当做 ...
- iOS开发——循环遍历的比较
常用的有for in.for循环.EnumerateObjectsUsingBlock 1.小规模的数据无所谓,但是对大量数据,for in 的遍历速度非常之快,不是for循环能比的: 2.对于数组, ...
- 微信小程序微信支付的一些坑
使用的是Node.js作为后端 统一下单: appid:这里的appid是调起微信支付的appid mch_id:商户号,需要注意的是商户号要与appid对应 nonce_str:Math.rando ...
- BZOJ 3325 [SCOI2013]密码 (逆模拟Manacher+构造)
题目大意:给你一个字符串每个位置和相邻两个位置为回文中心的最长回文串长度,让你构造一个合法的字典序最小的字符串 挺有意思的构造题 首先按照$Manacher$的思想还原$p$数组 定义$f_{ij}$ ...
- 企业级URL检测脚本
#!/bin/bash #检查web url 是否正常 . /etc/init.d/functions #引用系统函数库 #判断传参个数是否为一个 function usage(){ echo $&q ...
- Object-C,NSArraySortTest，数组排序3种方式
晚上回来,继续写Object-C的例子,今天不打算写iOS可视化界面的程序,太累了. 刚刚dady又电话过来,老一套,烦死了. 其实,我一直一个观点,无论发生什么事情,不要整天一副不开心的样子. 开开 ...
- 【codeforces 314C】Sereja and Subsequences
[题目链接]:http://codeforces.com/problemset/problem/314/C [题意] 让你从n个元素的数组中选出所有的不同的非递减子数列; 然后计算比这个子数列小的和它 ...
- hadoop-08-关闭THP服务
hadoop-08-关闭THP服务 #查看THP服务cat /sys/kernel/mm/redhat_transparent_hugepage/enabledcat /sys/kernel/mm/r ...
- URL长链接转换为短链接
URL长链接转换为段链接的工具非常多,可是.小编还是要给大家唠一种方法的: 操作过程例如以下,打开腾讯微博或者其它微,将自己的URL地址值按图片操作:
- zzulioj--1778-- 和尚特烦恼4——有多少战斗力（gcd）
1778: 和尚特烦恼4--有多少战斗力 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 259 Solved: 123 SubmitStatusWe ...