vue.js_11_路由的2中参数传递和路由的嵌套
1.以?的形式传递参数 <router-link to="/login?id=10&name=zs">登录</router-link>
发送参数:<router-link to="/login?id=10&name=zs">登录</router-link>
接受参数:通过{{$route.query.id}}来获取
template: '<h1>登录 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>',
<body>
<div id="app"> <!-- 如果在路由中,使用 查询字符串,给路由传递参数,则 不需要修改 路由规则的 path 属性 -->
<router-link to="/login?id=10&name=zs">登录</router-link>
<router-link to="/register">注册</router-link> <router-view></router-view> </div> <script>
var login = {
template: '<h1>登录 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>',
data() {
return {
msg: '123'
}
},
} var register = {
template: '<h1>注册</h1>'
} var router = new VueRouter({
routes: [{
path: '/login',
component: login
},
{
path: '/register',
component: register
}
]
}) // 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router: router
router
});
</script>
</body>
2.使用params传递参数
发送参数:<router-link to="/login/10/hdh">登录</router-link>
获取参数:通过{{$route.params.id}}来获取
template: '<h1>登录---{{$route.params.id}}---{{$route.params.name}}</h1>',
路由的匹配需要通过占位符来 占位
{ path: '/login/:id/:name',
component: login },
<body>
<div id="app"> <router-link to="/login/10/hdh">登录</router-link>
<router-link to="/register">注册</router-link> <router-view></router-view> </div> <script>
var login = {
template: '<h1>登录---{{$route.params.id}}---{{$route.params.name}}</h1>',
data() {
return {
msg: '123'
}
},
} var register = {
template: '<h1>注册</h1>'
} var router = new VueRouter({
routes: [{
path: '/login/:id/:name',
component: login
},
{
path: '/register',
component: register
}
]
}) // 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router: router
router
});
</script>
</body>
3.路由的嵌套
在路由配置中通过关键字:children来设定路由的嵌套
var router = new VueRouter({
routes: [{
path: '/account',
component: account,
//设置account的子路由
children: [{
path: 'login',
component: login
}, {
path: 'register',
component: register
}]
}
]
<body>
<div id="app">
<router-link to="/account">Account组件</router-link>
<router-view></router-view>
</div>
<template id="tmpl">
<div>
<h1>这是 Account组件</h1>
<router-link to="/account/login">登陆</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script>
var account = {
template: '#tmpl'
};
var login = {
template: '<h3>登陆</h3>'
};
var register = {
template: '<h3>注册</h3>'
}; var router = new VueRouter({
routes: [{
path: '/account',
component: account,
//account的子路由
children: [{
path: 'login',
component: login
}, {
path: 'register',
component: register
}]
}
]
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router
})
</script>
</body>
vue.js_11_路由的2中参数传递和路由的嵌套的更多相关文章
- laravel基础课程---3、路由(Laravel中的常见路由有哪几种)
laravel基础课程---3.路由(Laravel中的常见路由有哪几种) 一.总结 一句话总结: 6种:post,get,put,patch,delete,options Route::get($u ...
- mvc5中webapi的路由
1.Global.asax中路由的注册 public class WebApiApplication : System.Web.HttpApplication { protected void App ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- vue中怎样实现 路由拦截器
vue中怎样实现 路由拦截器(当用户没有登录的时候,跳转到登录页面,已经登录的时候,不能跳转到登录页,除非后台token失效) 在 我们需要实现这样 一个功能,登录拦截 其实就是 路由拦截,首先在定义 ...
- 056——VUE中vue-router之路由参数的验证处理保存路由安全
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js 中的动态路由
静态路由是不可以传递参数的.需要传递参数得用到动态路由 那么如何将参数作为路由呢? //在参数名前面加上 : ,然后将参数写在路由的 path 内 routes: [ //将页面组件与path指令的路 ...
- [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- Vue学习手记03-路由跳转与路由嵌套
1.路由跳转 添加一个LearnVue.vue文件, 在router->index.js中 引入import Learn from '@/components/LearnVue' 在touter ...
- 在Ext JS 5应用程序中如何使用路由
简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双向数据绑定为开发人员承担了大量的繁重工作.在Ext JS 5种,另一个新特性就是路由,它 ...
随机推荐
- 弹性网卡支持私网多IP
摘要: 弹性网卡支持多IP功能可以最多在一块弹性网卡配置20个私网IP地址,特别适用于于以下场景. 1.单个服务器上托管多个应用,提升实例利用率,每个应用对外暴露一个独立的服务IP地址. 2.当实例发 ...
- Could not open file ..\obj\sys.o: No such file or directory解决办法
一.你的keil的安装路径以及系统用户名是否带中文字符以及一些特殊字符.二.环境变量的值存在中文或者特殊字符了,解决方法如下: 1.在C盘建立一个新的文件夹,命名为英文,如qcl2.右击"此 ...
- Delphi定时模拟键盘按键例程
delphi模拟键盘按键实例delphi模拟键盘按键实例,只是模拟一个按键的例子而已.到一定时间按下模拟按下一个按键,delphi7编译通过. 10秒点击一下H键,其他键你们去找数值替换吧,网上大把的 ...
- 372 在O(1)时间复杂度删除链表节点
原题网址:http://www.lintcode.com/zh-cn/problem/delete-node-in-the-middle-of-singly-linked-list/ 给定一个单链表中 ...
- idea2017.2普通web工程将lib包导入到artifact中的问题。
这个问题找了解决了好久. 刚开始我以为是c3p0包错误,就把所有jar包都删了. 把依赖里的,library的,artfact->avaliable elements里的都删了. 重新复制粘贴到 ...
- Mysql优化系列之查询性能优化前篇1
前言 这是优化系列的最后一篇的第1小篇,我们其实可以直接从sql怎么写讲起,why not?但是我还是决定花2个篇幅 问一些问题,带着几个问题循序渐进的往下走. 一个sql语句是怎么被执行的? sql ...
- Java中关于注释、标识符、变量、常量、数据类型、类型转换、转移字符以及数值型的表现形式的详解
Java文件的注意事项 在同一个Java文件中,可以定义多个类,但是被public修饰的类只能够有一个,并且此类名要与文件名一致. 在同一个类中,可以定义多个方法,但是名字叫做main的方法只能有一个 ...
- css---4表单相关伪类
input:enabled{ color:red;} input:disabled{ color:blue;} enabled or disable 表单的状态 input:checked{ widt ...
- leetcode-109-有序链表转二叉搜索树
---恢复内容开始--- 题目描述: 方法一:O(n) O(n) class Solution: def sortedListToBST(self, head: ListNode) -> Tre ...
- [JZOJ4684] 【GDOI2017模拟8.11】卡牌游戏
题目 描述 题目大意 有111到2n2n2n牌,一开始分别给两个人,每人nnn张. 轮流出牌,给出对手出牌的顺序,若自己的牌更大,就记一分. 在中间的某个时刻可以改变游戏规则. 问最大的分数. 思考历 ...