在组件中使用$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-路由组件传参的更多相关文章

  1. Vue-admin工作整理(四):路由组件传参

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

  2. VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)

    vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...

  3. Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)

    一.前言                    1.公共轮播图的实现                    2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...

  4. vue 监听父子组件传参,对象数据变化

    watch:{ 组件传参的字段 :{ handler (newV, oldV){ 这里打印 newV, oldV 就可以看到数据变化了 } , immediate: true, // 重点 deep: ...

  5. Vue学习之路由vue-router传参及嵌套小结(十)

    一.路由传递参数: 1.使用query传值: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. vue路由组件传参

    在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 取代与 $route 的耦合 const ...

  7. 路由组件传参-props解耦方式(主要)

    在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 取代与 $route 的耦合 const ...

  8. vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期

    目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...

  9. vue中的路由传参及跨组件传参

    路由跳转   this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...

  10. vue路由传参及组件传参和组件方法调用

    VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...

随机推荐

  1. Python3 - MySQL适配器 PyMySQL

    本文我们为大家介绍 Python3 使用 PyMySQL 连接数据库,并实现简单的增删改查. 什么是 PyMySQL? PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一 ...

  2. 如何调节tomcat初始内存

    1.linux下调节tomcat初始内存大小 linux下tomcat的运行文件为catalina.sh,打开文件,在文件靠近顶部找到“ JAVA_OPTS ”字样,在它后面添加如下内容即可 # JA ...

  3. SpringBoot集成TkMybatis插件 (二)

    一.Tkmybatis的好处 Tkmybatis是在mybatis框架的基础上提供了很多工具,让开发更加高效.这个插件里面封装好了我们需要用到的很多sql语句,不过这个插件是通过我们去调用它封装的各种 ...

  4. ado.net介绍

    System.Data:DataTable,DataSet,DataRow,DataColumn,DataRelation,Constraint System.Data.Common(各种数据访问类的 ...

  5. PHP单例模式 demo

    <?php class single{ static public $db; private function __construct(){ }; static function getinst ...

  6. BigInteger 类 和 BigDecimal 类

    一 .BigInteger BigInteger类在计算和处理任意大小的整数方面是很有用的. BigInteger 任意大的整数,原则上是,只要你的计算机的内存足够大,可以有无限位的. BigInte ...

  7. python记录_day30 多进程

    1.什么是进程 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础. 同一个程序执行两次,就会产生两个进程 ## 进程调度算 ...

  8. 『TensorFlow』迁移学习

    完全版见github:TransforLearning 零.迁移学习 将一个领域的已经成熟的知识应用到其他的场景中称为迁移学习.用神经网络的角度来表述,就是一层层网络中每个节点的权重从一个训练好的网络 ...

  9. hdu5992 kdt

    题意:n个旅馆,每个有花费,m个查询,查询在某个点在c花费范围内的距离最小的旅馆 题解:kdt,建成四维,坐标两维,花费一维,id一维,实际上建树只用前两维,正常的查询,如果满足条件在更新答案即可 / ...

  10. 第二阶段——个人工作总结DAY10

    1.昨天做了什么:昨天其实什么也没实现. 2.今天打算做什么:今天就软件,等到审核过了,再看看软件最后后台是怎么实现的. 3.遇到的困难:后台自己都没有实现.