Vue 路由组件传参的 8 种方式
我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router@4
。
编程式路由传参
除了使用
<router-link>
创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
1. 通过 params
传递
路由配置
路径参数 用冒号
:
表示。
const routes = [// 动态段以冒号开始{ path: 'details/:id', name: "details", component: Details },
]
router.push()
方法的参数可以是一个字符串路径,或者一个描述地址的对象。
const Home = {template: '<div @click="toDetails">To Details</div>',metheds: {toDetails() {// 字符串路径this.$router.push('/details/001')// 带有路径的对象this.$router.push({path: '/details/001'})// 命名路由,路由配置时,需要 name 字段this.$router.push({ name: 'details', params: { id: '001' } })}}
}
注意,如果提供了 path
,params
会被忽略:
// `params` 不能与 `path` 一起使用
router.push({ path: '/details', params: { id: '001' } }) // -> /details
组件获取数据
当一个路由被匹配时,它的 params 的值将在每个组件中以
this.$route.params
的形式暴露出来。
const Details = {template: '<div>Details {{ $route.params.id }} </div>',created() {// 监听路由变化this.$watch(() => this.$route.params,(toParams, previousParams) => {// 对路由变化做出响应...})},
}
2. 通过 query
传递
这种情况下 query
(查询参数)传递的参数会显示在 url 后面,如:/details/001?kind=car
。
路由配置
使用 query
时,以下三种方式都是可行的:
this.$router.push('/details/001?kind=car')
this.$router.push({ path: '/details/001', query: { kind: "car" }})
this.$router.push({ name: 'details', params: { id: '001' }, query: { kind: 'car' }})
组件获取数据
组件通过 $route.query
获取:
const Details = {template: '<div>Details {{ $route.query.kind }} </div>',created() {// 监听路由变化this.$watch(() => this.$route.query,(toParams, previousParams) => {// 对路由变化做出响应...})},
}
要对同一个组件中参数的变化做出响应的话,你可以简单地 watch
$route
对象上的任意属性,在这个场景中,就是$route.query
。
3. 通过 hash
传递
通过此方式,url 路径中带有 hash
,例如:/details/001#car
。
路由配置
使用 hash
时,以下三种方式都是可行的(同 query
):
this.$router.push('/details/001#car')
this.$router.push({ path: '/details/001', hash: '#car'})
this.$router.push({ name: 'details', params: { id: '001' }, hash: 'car'})
组件获取数据
组件通过 $route.hash.slice(1)
获取:
const Details = {template: '<div>Details {{ $route.hash.slice(1) }} </div>',
}
通过 props 进行传递
在组件中使用
$route
会与路由紧密耦合,这限制了组件的灵活性,因为它只能用于特定的 URL。虽然这不一定是件坏事,但我们可以通过props
配置来解除这种行为。
以解耦的方式使用 props
进行参数传递,主要是在路由配置中进行操作。
1. 布尔模式
当 props
设置为 true
时,route.params
将被设置为组件的 props。
例如下面的代码是通过 $route
的方式获取动态字段 id
:
const User = {template: '<div>User {{ $route.params.id }}</div>'
}
const routes = [{ path: '/user/:id', component: User }]
将上面的代码替换成 props
的形式,如下:
const User = {props: ['id'], // 组件中通过 props 获取 idtemplate: '<div>User {{ id }}</div>'
}
// 路由配置中,增加 props 字段,并将值 设置为 true
const routes = [{ path: '/user/:id', component: User, props: true }]
注意:对于有命名视图的路由,你必须为每个命名视图定义 props
配置:
const routes = [{path: '/user/:id',components: { default: User, sidebar: Sidebar },// 为 User 提供 propsprops: { default: true, sidebar: false }}
]
2. 对象模式
当 props
是一个对象时,它将原样设置为组件 props。当 props 是静态的时候很有用。
路由配置
const routes = [{path: '/hello',component: Hello,props: { name: 'World' }}
]
组件中获取数据
<Hello />
组件默认显示 Hello Vue,但路由配置了 props
对象,当路由跳转到 /hello
时,会显示传递过来的 name
, 页面会显示为 Hello World。
3. 函数模式
可以创建一个返回 props 的函数。这允许你将参数转换为其他类型,将静态值与基于路由的值相结合等等。
路由配置
使用函数模式时,返回 props 的函数接受的参数为路由记录 route
。
// 创建一个返回 props 的函数
const dynamicPropsFn = (route) => {return { name: route.query.say + "!" }
}
const routes = [{path: '/hello',component: Hello,props: dynamicPropsFn}
]
组件获取数据
当 URL 为 /hello?say=World
时, 将传递 {name: 'World!'}
作为 props 传给 Hello
组件。
const Hello = {props: {name: {type: String,default: 'Vue'}},template: '<div> Hello {{ name }}</div>'
}
此时页面将渲染:
注意:请尽可能保持 props
函数为无状态的,因为它只会在路由发生变化时起作用。如果你需要状态来定义 props,请使用包装组件,这样 vue 才可以对状态变化做出反应。
其他方式
1. 通过 Vuex 进行传递
1. store 存储状态;
2. A 组件更改 store 中的状态;
3. B 组件从 store 中获取。
2. 通过前端本地存储等方式
1. Local Storage;
2. Session Storage;
3. IndexedDB;
4. Web SQL;
5. Cookies。
来源:https://mp.weixin.qq.com/s/LazX7doIiVSpSneGdFEq1w
Vue 路由组件传参的 8 种方式相关推荐
- 【Vue】路由Router传参的两种方式(详解)
本文我们来介绍一下Vue中的 路由传参 问题,首先我们来准备一个基本路由的页面,如下: <!DOCTYPE html> <html lang="en"> & ...
- senchaTouch 给组件传参的两种方式
在senchaTouch 页面跳转中,有时我们需要将其前一个页面的相关参数传入到新的页面或者新的控件中,这是我们该如何传递参数进去呢,一下有两种方式: var arg;//定义将要 传入的参数 Ext ...
- Vue 路由组件通讯传参的 8 种方式
当 props 是一个对象时,它将原样设置为组件 props.当 props 是静态的时候很有用. 我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过 ...
- vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题 一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参 二.三种传递方式的区别 一 ...
- Vue:路由传参的三种方式
文章目录 前言 方式一:params 传参(显示参数) 1.声明式 router-link 2.编程式 this.$router.push 方式二:params 传参(不显示参数) 1.声明式 rou ...
- 详解vue路由传参的三种方式
在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...
- 【vue】vue路由传参的三种方式
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示 ...
- Vue-admin工作整理(四):路由组件传参
路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...
- 子组件向父组件传参的几种方法
子组件向父组件传参的几种方法 在用vue框架写项目的时候,多多少少会遇到子组件向父组件传参的方法.作为一个新手,确实让人头疼,于是便有了这篇小白写的总结,话不多说,开始! 以下方法全部基于这两个父子组 ...
最新文章
- 【Android 内存优化】Bitmap 图像尺寸缩小 ( 考虑像素密度、针对从不同像素密度资源中解码对应的 Bitmap 对象 | inDensity | inTargetDensity )
- SD-WAN加速推动企业分支上云—Vecloud
- SpringBoot日记——ElasticSearch全文检索
- Python编码风格规范
- java把二维转换为一维_在R语言中什么函数可以将二维数组转换成一维数组
- boost::math模块查找正态分布的均值或标准差的示例
- Java 10的10个新特性,将彻底改变你写代码的方式
- RDD持久化、广播、累加器
- 平衡二叉树搜索二叉树
- laravel html转pdf和转图片 (laravel-snappy的使用记录)
- 对于md5加盐安全性的理解
- 揭秘直播带货的收割套路
- mysql的默认隔离等级_mysql 四种隔离级别
- Scikit-learn_聚类算法_K均值聚类
- HDU-6608-Fansblog(威尔逊定理+快速乘)(多校)
- 肖秀荣:2022考研政治大纲解读及复习建议
- 中国义乌进口商品博览会秋季展落幕 成交额达2.7亿元
- 什么是A、NS、别名、MS记录
- 读书笔记——社会心理学——关系理论
- 怎么防止跨站请求伪造攻击(CSRF)