Vue-admin工作整理（四）：路由组件传参

路由组件传参：如果在一个页面中，需要根据路由去获得参数，去对页面进行一些逻辑处理，首先可以通过this.$router来获取路由实例的参数，这样页面组件和路由就进行了耦合，为了进行分离，更大程度复用，我们推出了路由组件传参的实现方案：

第一种传参方式为：布尔模式，它适用于有动态路由传参的路由配置中，实现思路为：将路由的参数作为属性来传入到组件中
```
<template><div>{{ name }}</div>
</template><script>
export default {props: {name: {type: String,default: 'apple'}}
}
</script>
<style lang="less" scoped></style>
```
```
{path: '/argu/:name',component: () => import('@/views/argu.vue'),props: true}
```
这样随着不同的url里的参数录入，组件都会展示对应的参数数据
第二种传参方式为：对象模式，这种模式适用于普通传统的路由类型，没有参数，实现思路为，直接在组件里定义一个属性，然后路由列表中定义一个路由对象的属性值，默认情况下取的是组件里的默认值，存在各个路由对象下则取对应路由对象的属性值：

<template><div class="about"><h1>This is an about page</h1><d>{{ food }}</d></div>
</template>
<script>
export default {props: {food: {type: String,default: 'apple'}}
}
</script>

{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),props: {food: 'banana'}}

第三种传参方式为：函数模式，适合于在传入的属性中，能够根据当前的路由，来做一些处理逻辑，从而设置传入组件的属性值，就是如果URL+参数，实现传递不同的内容给组件，实现逻辑：路由列表中以函数方式同等属性名（food）来获取当前路由实例的指定属性的值：route.query.food，然后组件中定义同名属性以承接路由列表传递的属性值，然后供业务逻辑处理呈现

{path: '/',name: 'home',alias: '/home_page',component: Home,props: route => ({food: route.query.food})}

  props: {food: {type: String,default: 'apple'}}

转载于:https://www.cnblogs.com/cristin/p/9632601.html

Vue-admin工作整理（四）：路由组件传参相关推荐

Vue 路由组件传参的 8 种方式
我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router ...
vuejs中路由的传参以及路由props配置
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
【Vue3】第十四部分父子组件传参
[Vue3]第十四部分父子组件传参文章目录 [Vue3]第十四部分父子组件传参 14. 父子组件传参 14.1 父传子(props) 14.2 子传父(emit) 14.3 子传父(ref) 总 ...
我的Vu啊（vue 2.0，数据监听，计算属性，组件传参）
提示:个人Vue学习工作总结 (持续更新中如果有不对的地方还请前辈多多指点) 文章目录 vue 计算属性 computed vue 数据监听 wacth 提示:以下是本篇文章正文内容,下面案例可供 ...
Vue学习（组件传参）-学习笔记
文章目录 Vue学习(组件传参)-学习笔记父到子子到父父操作子-ref(类似于操作dom) 兄弟之间传参 Vue学习(组件传参)-学习笔记父到子 Father:(index) <temp ...
Vue.js父与子组件之间传参父向子组件传参　　例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为ht
Vue.js父与子组件之间传参父向子组件传参例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...
VUE3 之组件传参
目录 1. 概述 2. 组件传参 3. 综述 4. 个人公众号 1. 概述韦奇定律告诉我们:大部分人都很容易被别人的话所左右,从而开始动摇.怀疑,最终迷失自我.因此我们要努力的坚定信念,相信自己,才 ...
vue2 父子组件传参回调函数使用
关键点: 父组件给子组件动态传参使用v-bind:属性key(多个单词用下划线拼接) 子组件接收父组件传参参数使用 props标签,+属性key多个单词用驼峰形式拼接) 子组件定义回调父组件函数子组 ...

Vue-admin工作整理（四）：路由组件传参

Vue-admin工作整理（四）：路由组件传参相关推荐

最新文章

热门文章