一、使用冒号(:)的形式传递参数

1,路由列表的参数设置

(1)路由列表的 path 是可以带参数的,我们在路由配置文件(router/index.js)里以冒号的形式设置参数。
(2)下面样例代码中,我在跳转到欢迎页面(/hello)时,带有两个参数:id 和 userName。
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index' //引入首页组件
import hello from '@/components/hello' //引入欢迎页组件 //Vue全局使用Router
Vue.use(Router) export default new Router({
routes: [ //配置路由,使用数组形式
{
path: '/', //链接路径
name: 'index', //路由名称
component: index //映射的组件
},
{
path: '/hello/:id/:userName',
name: 'hello',
component: hello
}
]
})

2,参数的传递

(1)如果使用 <router-link> 组件跳转的话,可以这么携带参数:
<router-link to="/hello/123/hangge">跳转到 hello</router-link>
(2)如果使用 js 代码跳转的话,可以这么携带参数:
this.$router.push("/hello/123/hangge");

3,参数的获取

页面中通过 $route.params.xxx 获取传递过来的数据。
<template>
<div>
<h1>ID:{{ $route.params.id}}</h1>
<h1>用户名:{{ $route.params.userName}}</h1>
</div>
</template>

4,运行效果

可以看到点击首页链接进行跳转后,参数成功传递并显示。

     
 

二、使用 query 方式传递参数

1,路由列表

query 方式类似 get 传参,即通过 URL 传递参数。而路由列表的 path 不需要配置参数:

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'  //引入首页组件
import hello from '@/components/hello'  //引入欢迎页组件
 
//Vue全局使用Router
Vue.use(Router)
 
export default new Router({
  routes: [ //配置路由,使用数组形式
    {
      path: '/',   //链接路径
      name: 'index',  //路由名称
      component: index//映射的组件
    },
    {
      path: '/hello',
      name: 'hello',
      component: hello
    }
  ]
})

2,参数的传递

(1)如果使用 <router-link> 组件跳转的话,可以这么携带参数:

<router-link :to="{path:'/hello', query:{id:123, userName:'hangge'}}">
跳转到 hello
</router-link>

(2)如果使用 js 代码跳转的话,可以这么携带参数:

this.$router.push({
path:'/hello',
query:{id:123, userName:'hangge'}
});

3,参数的获取

页面中通过 $route.query.xxx 获取传递过来的数据。
<template>
<div>
<h1>ID:{{ $route.query.id}}</h1>
<h1>用户名:{{ $route.query.userName}}</h1>
</div>
</template>

4,运行效果

可以看到点击首页链接进行跳转后,参数是自动拼接到 url 后面进行传递的。

三、使用 params 方式传递参数

1,路由列表

params 方式类似于 post 传参,即传递的参数不会显示在 URL 上。同上面的 query 方式一样,路由列表的 path 不需要配置参数:
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index' //引入首页组件
import hello from '@/components/hello' //引入欢迎页组件 //Vue全局使用Router
Vue.use(Router) export default new Router({
routes: [ //配置路由,使用数组形式
{
path: '/', //链接路径
name: 'index', //路由名称
component: index//映射的组件
},
{
path: '/hello',
name: 'hello',
component: hello
}
]
})

2,参数的传递

注意:params 只能用 name 来引入路由,而不能用 path。

(1)如果使用 <router-link> 组件跳转的话,可以这么携带参数:

<router-link :to="{name:'hello', params:{id:123, userName:'hangge'}}">
跳转到 hello
</router-link>

(2)如果使用 js 代码跳转的话,可以这么携带参数:

this.$router.push({
name:'hello',
params:{id:123, userName:'hangge'}
});

3,参数的获取

页面中通过 $route.params.xxx 获取传递过来的数据。
<template>
<div>
<h1>ID:{{ $route.params.id}}</h1>
<h1>用户名:{{ $route.params.userName}}</h1>
</div>
</template>

4,运行效果

可以看到这种方式,参数的传递不会拼接到 url 后面。
 

附:使用 props 实现参数解耦

    从上面的样例可以看出,当路由携带参数跳转时,页面这边通过 $route.params.xxx 或 $route.query.xxx 来获取传递过来的数据。但这样有个问题,由于组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。
    要解决这个问题,我们可以使用 props 将组件和路由解耦。props 共有如下三种模式。
 

1,布尔模式

(1)直接将路由配置中的 props 属性被设置为 true,那么参数将会被设置为组件属性。
export default new Router({
routes: [ //配置路由,使用数组形式
{
path: '/', //链接路径
name: 'index', //路由名称
component: index //映射的组件
},
{
path: '/hello/:id/:userName',
name: 'hello',
component: hello,
props: true
}
]
})

(2)然后我们页面组件这边不再需要通过 $route.params.xxx 或 $route.query.xxx 来获取传递过来的数据。

<template>
<div>
<h1>ID:{{ id }}</h1>
<h1>用户名:{{ userName}}</h1>
</div>
</template> <script>
export default {
name: 'hello',
props: ['id', 'userName']
}
</script>

2,对象模式

(1)我们可以将 props 设置为一个对象,对象内容会被设置为组件属性。这种方式常用来配置静态参数。
export default new Router({
routes: [ //配置路由,使用数组形式
{
path: '/', //链接路径
name: 'index', //路由名称
component: index //映射的组件
},
{
path: '/hello',
name: 'hello',
component: hello,
props: {
id: 1234,
userName: "hangge"
}
}
]
})

(2)然后页面组件这边获取数据方式和前面一样。

<template>
<div>
<h1>ID:{{ id }}</h1>
<h1>用户名:{{ userName}}</h1>
</div>
</template> <script>
export default {
name: 'hello',
props: ['id', 'userName']
}
</script>

3,函数模式

(1)我们还可以创建一个函数返回 props,在函数中对参数值进行处理,或者将静态值与基于路由的值结合。
function dynamicPropsFunc (route) {
return {
message: "欢迎您:" + route.params.userName
}
} export default new Router({
routes: [ //配置路由,使用数组形式
{
path: '/', //链接路径
name: 'index', //路由名称
component: index //映射的组件
},
{
path: '/hello',
name: 'hello',
component: hello,
props: dynamicPropsFunc
}
]
})

(2)这里假设我们使用 JS 进行跳转,代码如下:

this.$router.push({
name:'hello',
params:{id:123, userName:'hangge'}
});

(3)目标页面组件代码,以及运行结果如下:

<template>
<div>
<h1>{{ message }}</h1>
</div>
</template> <script>
export default {
name: 'hello',
props: ['message']
}
</script>

Vue.js - 路由 vue-router 的使用详解2(参数传递)的更多相关文章

  1. vue.js基础知识篇(6):组件详解

    第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...

  2. vue.js基础知识篇(2):指令详解

    第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...

  3. Vue.js学习笔记之修饰符详解

    本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点“.”连接修饰符名 ...

  4. 使用vue.js路由踩到的一个坑Unknown custom element

    在配合require.js使用vue路由的时候,遇到了路由组件报错: “vue.js:597 [Vue warn]: Unknown custom element: <router-link&g ...

  5. [转]Vue项目全局配置微信分享思路详解

    这篇文章给大家介绍了vue项目全局配置微信分享思路讲解,使用vue作为框架,使用vux作为ui组件库,具体内容详情大家跟随脚本之家小编一起学习吧 这个项目为移动端项目,主要用于接入公众号服务.项目采用 ...

  6. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  7. Vue实例初始化的选项配置对象详解

    Vue实例初始化的选项配置对象详解 1. Vue实例的的data对象 介绍 Vue的实例的数据对象data 我们已经用了很多了,数据绑定离不开data里面的数据.也是Vue的核心属性. 它是Vue绑定 ...

  8. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  9. 最详尽的 JS 原型与原型链终极详解,没有「可能是」。(一)

    最详尽的 JS 原型与原型链终极详解,没有「可能是」.(一) 第二篇已更新,点击进入第三篇已更新,点击进入

  10. JS中的函数节流throttle详解和优化

    JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...

随机推荐

  1. mac上安装mamp集成环境

    深知mac配置环境是个坑,本人之前用的是xampp因为近期需要mongodb扩展,死活装不明白,索性就换了一个集成环境,在网上找了好多,最后选择了mamp 因为正版的要收费,所以在下载了N个以后终于找 ...

  2. 使用用Intellij Idea从Github上获取代码

    1.打开File菜单,选择Setting,在Version Control下找到Github. 2.分别在Login与Password中输入自己在Github注册的用户名和密码,然后点击Test按钮: ...

  3. 分治维护dp——19南昌网络赛C/cf750E

    南昌网络赛,是cf的原题 第一次做到这种题,所以认真想了下,每次给一个询问[L,R],要求出这个区间里有2017子序列,但是不能有2016子序列需要删掉的最少元素个数 首先如果我们之询问一小段区间[L ...

  4. img引用网络图片资源无法加载问题解决

    近期在自己项目中遇到引用一些网络图片资源,显示无法加载,但是在浏览器打开图片路径又可以显示的问题 解决办法: 在图片显示的界面把meta referrer标签改为never <meta name ...

  5. 上传漏洞科普[1]-文件上传表单是Web安全主要威胁

    为了让最终用户将文件上传到您的网站,就像是给危及您的服务器的恶意用户打开了另一扇门.即便如此,在今天的现代互联网的Web应用程序,它是一种 常见的要求,因为它有助于提高您的业务效率.在Facebook ...

  6. Xen的半虚拟化(Paravirtualization)

    三个特权级 IA-32体系提供了4个特权级别,正常情况下只用了2个, 操作系统运行在Ring 0,而应用程序运行在Ring 3. Xen让自己运行在Ring 0, 而操作系统运行在Ring 1, 应用 ...

  7. ant design 两个tabs如何同时切换

    假设界面上有两个地方用到了同一个tabs,但是切换其中一个tabs,另一个tabs并不会同时切换,因为只是在其中一个tabs上调用了onChange,所以需要用到activeKey动态地设置tabs的 ...

  8. yum处理损坏的包依赖关系

    有时在安装多个软件包时,某个包的软件依赖关系可能会被另外一个包的安装覆盖掉.这叫做损坏的包依赖关系(broken dependency). 如果系统出现问题,可以先尝试: yum clean all ...

  9. ARM 汇编访问 CPSR / SPSR 寄存器 【 msr ,mrs 】

    状态寄存器访问过程:读 - 改 - 写 读 CPSR / SPSR 指令[ mrs ]    格式:<opcode><cond> Rn, cpsr/spsr 写 CPSR / ...

  10. 笔记45 Hibernate快速入门(二)

    Hibernate O/R 映射 一.多对一 一个Product对应一个Category,一个Category对应多个Product,所以Product和Category是多对一的关系.使用hiber ...