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'
}
}
Vue-admin工作整理(四):路由组件传参的更多相关文章
- VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)
vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...
- 从 Vue 的视角学 React(四)—— 组件传参
组件化开发的时候,参数传递是非常关键的环节 哪些参数放在组件内部管理,哪些参数由父组件传入,哪些状态需要反馈给父组件,都需要在设计组件的时候想清楚 但实现这些交互的基础,是明白组件之间参数传递的方式, ...
- Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)
一.前言 1.公共轮播图的实现 2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...
- vue路由组件传参
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 取代与 $route 的耦合 const ...
- 路由组件传参-props解耦方式(主要)
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 取代与 $route 的耦合 const ...
- vue中的路由传参及跨组件传参
路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...
- vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期
目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...
- vue路由传参及组件传参和组件方法调用
VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...
- vue组件传参
一.父子组件的定义 负值组件的定义有两种,我称为常规父子组件和特殊父子组件. 1.1.常规父子组件 将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以 ...
随机推荐
- JavaScript实现预览本地上传图片
<html> <head> <title> www.jb51.net图片上传预览 </title> <script> function Pr ...
- war 包tomcat部署和maven的tomcat插件部署的不同
不用插件 1在linux服务器上下载号tomcat 或者上传tomcat 2上传war包,最好创建一个目录房war包,和tomcat 3解压war包,jar -xvf war 或者unzip wa ...
- webservice学习教程(三)--
快速入门 首先,我们来尝试一下调用别人写好的webService 来体验一把:我们访问http://www.webxml.com.cn/zh_cn/index.aspx 进入到里边 当我们输入一个号码 ...
- mysql授权用户,撤销用户,撤销权限基本操作
进入mysql库 use mysql; mysql> select host,user from user; +-----------+---------------+ | host | use ...
- 3.2.2 SpringMVC配置式开发
SpringMVC配置式开发 1. SpringMVC运行原理(执行过程) 2. 需求 用户提交一个请求, 服务端处理器接收到请求后, 给出一条信息,在相应页面中显示该条信息 3. 开发步骤 (1) ...
- A-the Beatles
传送门: 题意:题目给出n,k分别代表在这个环中饭店的个数和两个饭店相离的距离.然后再给出一组a,b分别代表在某一点s里最近饭店的距离和在这个s点走一步之后到达的点离最近饭店的距离. 然后问这个人再次 ...
- C语言之指针若干问题
1.指针变量的赋值问题. 常常有偷懒的小伙子,这样赋值 int *Pointer = 3:/ 这是给Pointer 所指的变量赋值,刚创建Pointer时,它所指的变量是不固定的,可能是某个重要的系 ...
- python使用telnetlib
python使用telnetlib 1 前言 目前,本篇仅记录前段时间搜索得到的关于python使用Telnet的技术博客,由于受领新任务,未进一步验证和深入研究与应用. 参考链接: python官网 ...
- VS2017 + EF6连接MySql
VS2017 + EF6连接MySql 原地址:https://blog.csdn.net/mzhifa/article/details/80999105 VS2017 + EF6连接MySql ...
- windows----------火狐浏览器访问所有https网站都显示链接不安全解决办法
1.如有以下情况,点右边的“高级”,看看自己的错误码是否为SEC_ERROR_UNKNOWN_ISSUER 2.在地址栏键入"about:config" 点击“我了解此风险” 3. ...