vue-router-8-路由组件传参
在组件中使用$route
会使之与其对应路由形成高度耦合,使用props解耦
const User = {
props: ['id'],
template: '<div>User{{ id }}</div>' //$route.params.id
}
const router = new VueRouter({
routes: [
//布尔模式,如果props被设置为true,route.params
将会被设置为组件属性。
{ path: '/user/:id', component: User, props: true }
// 如果props是一个对象,它会被按原样设置为组件属性。
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
//如果props是一个对象,它会被按原样设置为组件属性。当props是静态的时候有用
const router = new VueRouter({
routes: [
{ path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
]
})
//函数模式,可以将参数转换成另一种类型,将静态值与基于路由的值结合
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
]
})
]
})
vue-router-8-路由组件传参的更多相关文章
- Vue-admin工作整理(四):路由组件传参
路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...
- VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)
vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...
- Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)
一.前言 1.公共轮播图的实现 2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...
- vue 监听父子组件传参,对象数据变化
watch:{ 组件传参的字段 :{ handler (newV, oldV){ 这里打印 newV, oldV 就可以看到数据变化了 } , immediate: true, // 重点 deep: ...
- Vue学习之路由vue-router传参及嵌套小结(十)
一.路由传递参数: 1.使用query传值: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- vue路由组件传参
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 取代与 $route 的耦合 const ...
- 路由组件传参-props解耦方式(主要)
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 取代与 $route 的耦合 const ...
- vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期
目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...
- vue中的路由传参及跨组件传参
路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...
- vue路由传参及组件传参和组件方法调用
VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...
随机推荐
- Python3 - MySQL适配器 PyMySQL
本文我们为大家介绍 Python3 使用 PyMySQL 连接数据库,并实现简单的增删改查. 什么是 PyMySQL? PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一 ...
- 如何调节tomcat初始内存
1.linux下调节tomcat初始内存大小 linux下tomcat的运行文件为catalina.sh,打开文件,在文件靠近顶部找到“ JAVA_OPTS ”字样,在它后面添加如下内容即可 # JA ...
- SpringBoot集成TkMybatis插件 (二)
一.Tkmybatis的好处 Tkmybatis是在mybatis框架的基础上提供了很多工具,让开发更加高效.这个插件里面封装好了我们需要用到的很多sql语句,不过这个插件是通过我们去调用它封装的各种 ...
- ado.net介绍
System.Data:DataTable,DataSet,DataRow,DataColumn,DataRelation,Constraint System.Data.Common(各种数据访问类的 ...
- PHP单例模式 demo
<?php class single{ static public $db; private function __construct(){ }; static function getinst ...
- BigInteger 类 和 BigDecimal 类
一 .BigInteger BigInteger类在计算和处理任意大小的整数方面是很有用的. BigInteger 任意大的整数,原则上是,只要你的计算机的内存足够大,可以有无限位的. BigInte ...
- python记录_day30 多进程
1.什么是进程 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础. 同一个程序执行两次,就会产生两个进程 ## 进程调度算 ...
- 『TensorFlow』迁移学习
完全版见github:TransforLearning 零.迁移学习 将一个领域的已经成熟的知识应用到其他的场景中称为迁移学习.用神经网络的角度来表述,就是一层层网络中每个节点的权重从一个训练好的网络 ...
- hdu5992 kdt
题意:n个旅馆,每个有花费,m个查询,查询在某个点在c花费范围内的距离最小的旅馆 题解:kdt,建成四维,坐标两维,花费一维,id一维,实际上建树只用前两维,正常的查询,如果满足条件在更新答案即可 / ...
- 第二阶段——个人工作总结DAY10
1.昨天做了什么:昨天其实什么也没实现. 2.今天打算做什么:今天就软件,等到审核过了,再看看软件最后后台是怎么实现的. 3.遇到的困难:后台自己都没有实现.