在组件中使用$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. xlua修复C#的委托事件的时候,需要提前做好配置

    如下所示: //C#静态调用Lua的配置(包括事件的原型),仅可以配delegate,interface [CSharpCallLua] public static List<Type> ...

  2. Ubuntu16.04安装8821CE 无线网卡无驱动

    已解决 参考链接:https://unix.stackexchange.com/question ... -mint-18-2 内容 Worked solution (Requirements: ke ...

  3. 单分子荧光原位杂交(smFISH)

    single-molecule RNA fluorescence in situ hybridization (RNA smFISH) 单分子荧光原位杂交(smFISH)是一种新的基因表达分析方法,能 ...

  4. Linux网桥配置

    CentOS:1.配置临时网桥,重启后风格配置丢失[root@CentOS ~]# yum -y install bridge-utils[root@CentOS ~]# brctl addbr br ...

  5. CF1010F Tree

    真·毒瘤题 这个题面写错了一句话.要求的是每个节点的石子树>=它的两个儿子石子数的和. 首先考虑怎么算石子分配的方案. 如果对这棵树每个节点的石子数都和儿子差分一下的话,可以唯一对应一颗每个点都 ...

  6. chrome 自动加载flash

    class Login(unittest.TestCase): #初始 def setUp(self): chromeOpitons = Options() prefs = { # "pro ...

  7. Symmetric Tree leetcode java

    问题描述: Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). ...

  8. consul总结

    一.介绍 内置了服务注册与发现框 架.分布一致性协议实现.健康检查.Key/Value存储.多数据中心方案,不再需要依赖其他工具(比如ZooKeeper等)服务部署简单,只有一个可运行的二进制的包.每 ...

  9. 【PowerDesigner】【1】简单介绍

    正文: 创建表格 File→New Model→(Model types; Physical Data Model; Physical Diagram)Model name:名称:DBMS:数据库类型 ...

  10. css单位分析、颜色设置与调色板

    CSS单位分析 px:单位代表像素,1px代表一个像素点. %:设置子元素为父容器的占比. em:代表该元素中一个字体所占字符,常用在文字首行缩进.其具有继承性. rem:始终代表html中的字符所在 ...