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中参数传递和路由的嵌套的更多相关文章

  1. laravel基础课程---3、路由(Laravel中的常见路由有哪几种)

    laravel基础课程---3.路由(Laravel中的常见路由有哪几种) 一.总结 一句话总结: 6种:post,get,put,patch,delete,options Route::get($u ...

  2. mvc5中webapi的路由

    1.Global.asax中路由的注册 public class WebApiApplication : System.Web.HttpApplication { protected void App ...

  3. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  4. vue中怎样实现 路由拦截器

    vue中怎样实现 路由拦截器(当用户没有登录的时候,跳转到登录页面,已经登录的时候,不能跳转到登录页,除非后台token失效) 在 我们需要实现这样 一个功能,登录拦截 其实就是 路由拦截,首先在定义 ...

  5. 056——VUE中vue-router之路由参数的验证处理保存路由安全

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

  6. Vue.js 中的动态路由

    静态路由是不可以传递参数的.需要传递参数得用到动态路由 那么如何将参数作为路由呢? //在参数名前面加上 : ,然后将参数写在路由的 path 内 routes: [ //将页面组件与path指令的路 ...

  7. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  8. Vue学习手记03-路由跳转与路由嵌套

    1.路由跳转 添加一个LearnVue.vue文件, 在router->index.js中 引入import Learn from '@/components/LearnVue' 在touter ...

  9. 在Ext JS 5应用程序中如何使用路由

    简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双向数据绑定为开发人员承担了大量的繁重工作.在Ext JS 5种,另一个新特性就是路由,它 ...

随机推荐

  1. 弹性网卡支持私网多IP

    摘要: 弹性网卡支持多IP功能可以最多在一块弹性网卡配置20个私网IP地址,特别适用于于以下场景. 1.单个服务器上托管多个应用,提升实例利用率,每个应用对外暴露一个独立的服务IP地址. 2.当实例发 ...

  2. Could not open file ..\obj\sys.o: No such file or directory解决办法

    一.你的keil的安装路径以及系统用户名是否带中文字符以及一些特殊字符.二.环境变量的值存在中文或者特殊字符了,解决方法如下: 1.在C盘建立一个新的文件夹,命名为英文,如qcl2.右击"此 ...

  3. Delphi定时模拟键盘按键例程

    delphi模拟键盘按键实例delphi模拟键盘按键实例,只是模拟一个按键的例子而已.到一定时间按下模拟按下一个按键,delphi7编译通过. 10秒点击一下H键,其他键你们去找数值替换吧,网上大把的 ...

  4. 372 在O(1)时间复杂度删除链表节点

    原题网址:http://www.lintcode.com/zh-cn/problem/delete-node-in-the-middle-of-singly-linked-list/ 给定一个单链表中 ...

  5. idea2017.2普通web工程将lib包导入到artifact中的问题。

    这个问题找了解决了好久. 刚开始我以为是c3p0包错误,就把所有jar包都删了. 把依赖里的,library的,artfact->avaliable elements里的都删了. 重新复制粘贴到 ...

  6. Mysql优化系列之查询性能优化前篇1

    前言 这是优化系列的最后一篇的第1小篇,我们其实可以直接从sql怎么写讲起,why not?但是我还是决定花2个篇幅 问一些问题,带着几个问题循序渐进的往下走. 一个sql语句是怎么被执行的? sql ...

  7. Java中关于注释、标识符、变量、常量、数据类型、类型转换、转移字符以及数值型的表现形式的详解

    Java文件的注意事项 在同一个Java文件中,可以定义多个类,但是被public修饰的类只能够有一个,并且此类名要与文件名一致. 在同一个类中,可以定义多个方法,但是名字叫做main的方法只能有一个 ...

  8. css---4表单相关伪类

    input:enabled{ color:red;} input:disabled{ color:blue;} enabled or disable 表单的状态 input:checked{ widt ...

  9. leetcode-109-有序链表转二叉搜索树

    ---恢复内容开始--- 题目描述: 方法一:O(n) O(n) class Solution: def sortedListToBST(self, head: ListNode) -> Tre ...

  10. [JZOJ4684] 【GDOI2017模拟8.11】卡牌游戏

    题目 描述 题目大意 有111到2n2n2n牌,一开始分别给两个人,每人nnn张. 轮流出牌,给出对手出牌的顺序,若自己的牌更大,就记一分. 在中间的某个时刻可以改变游戏规则. 问最大的分数. 思考历 ...