vue教程3-06 vue路由嵌套(多层路由)，路由其他信息
多层嵌套：
<!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'}">登录</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':{
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>
效果图：
路由其他信息:
路由其他信息:
/detail/:id/age/:age {{$route.params | json}} -> 当前参数 {{$route.path}} -> 当前路径 {{$route.query | json}} -> 数据
<!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教程3-06 vue路由嵌套(多层路由)，路由其他信息的更多相关文章
- vue教程1-09 交互 vue实现百度下拉列表
vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...
- [AngularJS] “多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程
这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 1.AngularJS路由嵌套 Angularjs本身自带路由模块,可以满足通过不同 ...
- vue-router路由嵌套与二级路由重定向
(1)公共路由裁减 不是每个页面都存在导航,所以不要把导航组件在根组件APP.vue里引入,哪个页面需要,在哪里引入即可. 方案: 哪个页面需要,在哪个页面引入即可 (2)嵌套路由 注意:childr ...
- 我的一个React路由嵌套（多级路由），路由传参之旅
在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...
- Vue总结第五天：vue-router （使用模块化（创建Vue组件）机制编程）、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套（子路由）、路由传递数据、导航守卫）
Vue总结第五天:vue-router ✿ 路由(器)目录: □ vue中路由作用 □ vue-router基本使用 □ vue-router嵌套路由 □ vue-router参数传递 □ ...
- 06 Vue路由简介,原理,实现及嵌套路由,动态路由
路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...
- vue学习路由嵌套
1. 路由嵌套和参数传递 传参的两种形式: a.查询字符串:login?name=tom&pwd=123 {{$route.query}} ------ <li><route ...
- vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- vue教程3-01 路由、组件、bower包管理器使用
vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...
随机推荐
- Python-IDLE实现清屏
1.将下面文件复制到命名为ClearWindow.py的文件下,移动到 …Python\Python36-32\Lib\idlelib下. ############################## ...
- 第四章,java面向对象特性
4.1 特性 封装,继承, 多态(编译时:方法的重载,同一个类里面不同方法可以用同一个方法名只是传入参数不同, 运行时多态:基础类提供一个接口,在编译时只调用基础类的接口,在运行时才确定到底是哪一个子 ...
- Netty4.x 源码实战系列（一）： 深入理解ServerBootstrap 与 Bootstrap
转载自:https://www.cnblogs.com/itdriver/p/8149913.html 从Java1.4开始, Java引入了non-blocking IO,简称NIO.NIO与传统s ...
- 安卓4.2用adb 获取屏幕分辨率等信息
在终端输入adb shell dumpsys: 终端会打印出一些service list 用adb shell dumpsys+service名即可查询相应的信息. 屏幕分辨率用adb shell d ...
- js读取后端写入cookie出现乱码
设置字符编码集即可 Cookie cookie = new Cookie("user",URLEncoder.encode(nMessage, "UTF-8") ...
- 适配android和iOS上position:absolute和input问题
//适配android上absolute和input的问题var oHeight = $(document).height(); //屏幕当前的高度$(window).resize(function( ...
- 3D打印软件工具
切片与工艺规划(打印)软件: 3D打印中另外两个重要的步骤(切片和打印)中可以用到的一些开源,免费的软件和应用 Cura 开源, 免费 Python ...
- js-选项卡套选项卡
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- SRM465
250pt: 给定50个整数点,范围-500-500之间.然后在这些点上选2个点作为中心,画边长为整数的正方形,并且正方形不能重叠(可以不平行),而且而且边长不同为不同方案.求有多少种方案.. 思路: ...
- CSS 基础 例子 图片拼合技术
利用background-position xpos ypos 就是以图片的左上角顶点为原点,往下和右都为正,反之为负,移动图片 如: background-position: 15px 20px;( ...