Vue.js - 路由 vue-router 的使用详解2(参数传递)
一、使用冒号(:)的形式传递参数
1,路由列表的参数设置
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,参数的传递
<router-link to="/hello/123/hangge">跳转到 hello</router-link>
this.$router.push("/hello/123/hangge");
3,参数的获取
<template>
<div>
<h1>ID:{{ $route.params.id}}</h1>
<h1>用户名:{{ $route.params.userName}}</h1>
</div>
</template>
4,运行效果


二、使用 query 方式传递参数
1,路由列表
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,参数的获取
<template>
<div>
<h1>ID:{{ $route.query.id}}</h1>
<h1>用户名:{{ $route.query.userName}}</h1>
</div>
</template>
4,运行效果

三、使用 params 方式传递参数
1,路由列表
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="{name:'hello', params:{id:123, userName:'hangge'}}">
跳转到 hello
</router-link>
(2)如果使用 js 代码跳转的话,可以这么携带参数:
this.$router.push({
name:'hello',
params:{id:123, userName:'hangge'}
});
3,参数的获取
<template>
<div>
<h1>ID:{{ $route.params.id}}</h1>
<h1>用户名:{{ $route.params.userName}}</h1>
</div>
</template>
4,运行效果

附:使用 props 实现参数解耦
1,布尔模式
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,对象模式
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,函数模式
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(参数传递)的更多相关文章
- vue.js基础知识篇(6):组件详解
第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...
- vue.js基础知识篇(2):指令详解
第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...
- Vue.js学习笔记之修饰符详解
本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点“.”连接修饰符名 ...
- 使用vue.js路由踩到的一个坑Unknown custom element
在配合require.js使用vue路由的时候,遇到了路由组件报错: “vue.js:597 [Vue warn]: Unknown custom element: <router-link&g ...
- [转]Vue项目全局配置微信分享思路详解
这篇文章给大家介绍了vue项目全局配置微信分享思路讲解,使用vue作为框架,使用vux作为ui组件库,具体内容详情大家跟随脚本之家小编一起学习吧 这个项目为移动端项目,主要用于接入公众号服务.项目采用 ...
- js 引入Vue.js实现vue效果
拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...
- Vue实例初始化的选项配置对象详解
Vue实例初始化的选项配置对象详解 1. Vue实例的的data对象 介绍 Vue的实例的数据对象data 我们已经用了很多了,数据绑定离不开data里面的数据.也是Vue的核心属性. 它是Vue绑定 ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- 最详尽的 JS 原型与原型链终极详解,没有「可能是」。(一)
最详尽的 JS 原型与原型链终极详解,没有「可能是」.(一) 第二篇已更新,点击进入第三篇已更新,点击进入
- JS中的函数节流throttle详解和优化
JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...
随机推荐
- mac上安装mamp集成环境
深知mac配置环境是个坑,本人之前用的是xampp因为近期需要mongodb扩展,死活装不明白,索性就换了一个集成环境,在网上找了好多,最后选择了mamp 因为正版的要收费,所以在下载了N个以后终于找 ...
- 使用用Intellij Idea从Github上获取代码
1.打开File菜单,选择Setting,在Version Control下找到Github. 2.分别在Login与Password中输入自己在Github注册的用户名和密码,然后点击Test按钮: ...
- 分治维护dp——19南昌网络赛C/cf750E
南昌网络赛,是cf的原题 第一次做到这种题,所以认真想了下,每次给一个询问[L,R],要求出这个区间里有2017子序列,但是不能有2016子序列需要删掉的最少元素个数 首先如果我们之询问一小段区间[L ...
- img引用网络图片资源无法加载问题解决
近期在自己项目中遇到引用一些网络图片资源,显示无法加载,但是在浏览器打开图片路径又可以显示的问题 解决办法: 在图片显示的界面把meta referrer标签改为never <meta name ...
- 上传漏洞科普[1]-文件上传表单是Web安全主要威胁
为了让最终用户将文件上传到您的网站,就像是给危及您的服务器的恶意用户打开了另一扇门.即便如此,在今天的现代互联网的Web应用程序,它是一种 常见的要求,因为它有助于提高您的业务效率.在Facebook ...
- Xen的半虚拟化(Paravirtualization)
三个特权级 IA-32体系提供了4个特权级别,正常情况下只用了2个, 操作系统运行在Ring 0,而应用程序运行在Ring 3. Xen让自己运行在Ring 0, 而操作系统运行在Ring 1, 应用 ...
- ant design 两个tabs如何同时切换
假设界面上有两个地方用到了同一个tabs,但是切换其中一个tabs,另一个tabs并不会同时切换,因为只是在其中一个tabs上调用了onChange,所以需要用到activeKey动态地设置tabs的 ...
- yum处理损坏的包依赖关系
有时在安装多个软件包时,某个包的软件依赖关系可能会被另外一个包的安装覆盖掉.这叫做损坏的包依赖关系(broken dependency). 如果系统出现问题,可以先尝试: yum clean all ...
- ARM 汇编访问 CPSR / SPSR 寄存器 【 msr ,mrs 】
状态寄存器访问过程:读 - 改 - 写 读 CPSR / SPSR 指令[ mrs ] 格式:<opcode><cond> Rn, cpsr/spsr 写 CPSR / ...
- 笔记45 Hibernate快速入门(二)
Hibernate O/R 映射 一.多对一 一个Product对应一个Category,一个Category对应多个Product,所以Product和Category是多对一的关系.使用hiber ...