vue 路由传参的8种方式 转
编程式路由传参
除了使用 创建 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 字段,并将值 设置为 trueconst 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' }}]
组件中获取数据
const Hello = {props: {name: {type: String,default: 'Vue'}},template: '<div> Hello {{ name }}</div>'}
组件默认显示 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 才可以对状态变化做出反应。
其他方式
- 通过 Vuex 进行传递
1. store 存储状态;2. A 组件更改 store 中的状态;3. B 组件从 store 中获取。
- 通过前端本地存储等方式
1. Local Storage;2. Session Storage;3. IndexedDB;4. Web SQL;5. Cookies。
vue 路由传参的8种方式 转相关推荐
- vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题 一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参 二.三种传递方式的区别 一 ...
- 详解vue路由传参的三种方式
在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...
- 【vue】vue路由传参的三种方式
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示 ...
- Vue路由传参的几种方式
前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式.具 ...
- vue路由传参的四种方式
vue路由传参 一.router-link路由导航 父组件: 使用<router-link to = "/跳转路径/传入的参数"></router-link> ...
- vue 如何将参数放到连接上_通过Vue路由传参的两种方式及Vue组件中接收参数的方式...
1. Vue传参方式 1.1 通过动态路由传参 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那 ...
- vue路由传参的三种方式
目录 1.动态路由传参 2.params传参 3.query传参 1.动态路由传参 使用"路径参数"使用冒号 : 标记.当匹配到一个路由时,参数值会被设置到 this.$route ...
- vue路由传参的两种方式
项目场景: 例如:点击table表格第一列进入详情页,这时候我们进行路由跳转就需要携带一些参数以便我们在详情页使用 跳转方式 一般我们有两种方式让路由携带参数 1.路由传参query(path是路由地 ...
- vue路由传参的三种方式区别(params,query)
最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 1 <ul class="table_ ...
最新文章
- java二进制转十进制代码_二进制转十进制java代码
- 随机给出三十道四则运算题目
- jzoj3913-艰难的选择【差分,统计】
- lxml学习【未完成】
- springmvc与struts2的区别
- ACM模式数组构建二叉树
- struts2学习 - action - 1
- 使用 ngrok(小米球)实现内网穿透映像到外网访问项目
- pdf转cad怎么弄_还在为cad转pdf烦恼吗?教你CAD批量转pdf
- IDEA创建类注释模板和方法注释模板
- python k线斜率计算_在Python中计算斜率的方法
- 通信时代的发展与5G未来的发展方向以及面临的业务挑战
- AWFWD改进后的融合算法
- SpringBoot实现12306自动抢票系统
- java-图书Marc文件导入处理
- Cocos Creator:挑战全平台引擎极限
- UnityStandardAsset工程、源码分析_2_赛车游戏[玩家控制]_车辆核心控制
- 美国地质调查局DEM,需账户密码
- plugins报红的解决办法
- 漫画:什么是插入排序算法?