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 ...
随机推荐
- django框架-Admin管理站点搭建
在django框架中,admin基本上算是已经写好了的,拿过来进行简单的处理即可以使用的,相对于flask来说已经是相当的便捷了. 在使用中,步骤如下: 1.管理界面本地化:即将英文标题等的变成中文, ...
- FFT&NTT学习笔记
具体原理就不讲了qwq,毕竟证明我也不太懂 FFT(快速傅立叶变换)&NTT(快速数论变换) FFT //求多项式乘积 //要求多项式A和多项式B的积多项式C //具体操作就是 //DFT(A ...
- red hat linux之Samba、DHCP、DNS、FTP、Web的安装与配置
本教程是在red hat linux 6.0环境下简单测试!教程没有图片演示,需要具有一定Linux基础知识,很多地方的配置需要根据自己的情况修改,照打不一定可以配置成功.(其他不足后续修改添加) y ...
- Java默认方法
示例1 interface InterfaceA { default void say() { System.out.println("InterfaceA"); } } publ ...
- 紫书 习题8-14 UVa 1616（二分+小数化分数+精度）
参考了https://www.cnblogs.com/dwtfukgv/p/5645446.html (1)直接二分答案.说实话我没有想到, 一开始以为是贪心, 以某种策略能得到最优解. 但是想了很久 ...
- 洛谷P5087 数学
DP. 设f[i][j]为前j个数中选i个数的所有组合的分数之和 决策: 不选这个数,得分为f[i][j - 1] 选这个数,得分为f[i - 1][j - 1] * a[j] 可以得到状态转移方程为 ...
- LightOJ - 1038 Race to 1 Again 递推＋期望
题目大意:给出一个数,要求你按一定的规则将这个数变成1 规则例如以下,如果该数为D,要求你在[1,D]之间选出D的因子.用D除上这个因子,然后继续按该规则运算.直到该数变成1 问变成1的期望步数是多少 ...
- Project Euler：Problem 93 Arithmetic expressions
By using each of the digits from the set, {1, 2, 3, 4}, exactly once, and making use of the four ari ...
- POJ 2739 Sum of Consecutive Prime Numbers(素数)
POJ 2739 Sum of Consecutive Prime Numbers(素数) http://poj.org/problem? id=2739 题意: 给你一个10000以内的自然数X.然 ...
- 与Greenplum度过的三个星期
5月4日-5月24日.断断续续折腾了三个星期的Greenplum,总算告一段落了:扩容,发现扩不成容.仅仅好升级.升级,发现一堆错误,仅仅好暂停修复数据库:修好了,继续升级.升完级,发现错误.修啊修啊 ...