路由组件传参-props解耦方式(主要)
在组件中使用 $route
会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。
使用 props
将组件和路由解耦:
取代与 $route
的耦合
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
通过 props
解耦
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// 对于包含命名视图的路由,你必须分别为每个命名视图添加 `props` 选项:
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
这样你便可以在任何地方使用该组件,使得该组件更易于重用和测试。
#布尔模式
如果 props
被设置为 true
,route.params
将会被设置为组件属性。(会挂载到 组件、.vue 文件,定义的相同名字的 props 上)
#对象模式
如果 props
是一个对象,它会被按原样设置为组件属性。当 props
是静态的时候有用。
const router = new VueRouter({
routes: [
{ path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
]
})
#函数模式
你可以创建一个函数返回 props
。这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等。
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
]
})
URL /search?q=vue
会将 {query: 'vue'}
作为属性传递给 SearchUser
组件。
请尽可能保持 props
函数为无状态的,因为它只会在路由发生变化时起作用。如果你需要状态来定义 props
,请使用包装组件,这样 Vue 才可以对状态变化做出反应。
路由命名视图详见:https://router.vuejs.org/zh/guide/essentials/named-views.html
props耦合详见:https://router.vuejs.org/zh/guide/essentials/passing-props.html
路由组件传参-props解耦方式(主要)的更多相关文章
- VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)
vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...
- Vue-admin工作整理(四):路由组件传参
路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...
- Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)
一.前言 1.公共轮播图的实现 2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...
- vue路由组件传参
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 取代与 $route 的耦合 const ...
- vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期
目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...
- vue路由传参及组件传参和组件方法调用
VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...
- vue中的路由传参及跨组件传参
路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...
- 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作
父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- vue组件传参
一.父子组件的定义 负值组件的定义有两种,我称为常规父子组件和特殊父子组件. 1.1.常规父子组件 将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以 ...
随机推荐
- 《你不知道的JavaScript(上)》笔记——作用域闭包
当函数可以记住并访问所在的词法作用域时, 就产生了闭包, 即使函数是在当前词法作用域之外执行. function wait(message) { setTimeout( function timer( ...
- Mac 上卸载node和npm
Mac 上卸载node和npm 卸载node依次在终端执行下面的脚本 sudo npm uninstall npm -gsudo rm -rf /usr/local/lib/node /usr/loc ...
- 从零搭建配置Cuckoo Sandbox
1.安装依赖 $ sudo apt-get install git mongodb libffi-dev build-essential python-django python python-dev ...
- mac下的夜神模拟器链接vscode
1.找到夜神模拟器,点击右键,查看包内容,找到文件夹下面的macos在点击右键打开终端.输入: adb connect 127.0.0.1:62001 dart和flutter交流群:45289287 ...
- charles-mock数据的方法(有空自己写一个)
https://www.jianshu.com/p/75d24f264ce2 这个也可以参考下 https://www.cnblogs.com/kaibindirver/p/9104996.html ...
- jQuery ajax表单提交
Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form ...
- iOS知识点总结
1.监测网络状态: - (void)checkNetwork { __block NSString *tips; _reachiabilityManager = [AFNetworkReachabil ...
- 遍历日期的Linux Shell脚本
#! /bin/bash date=$1 eddt=$2 while [ $date -le $eddt ]; do echo $date date=$(date -d "${date}+1 ...
- 我是如何提高工作效率的-工具篇(一)-Clover
痛点: 还在为资源管理器窗口切来切去烦恼吗? 效果图: 实现工具:Clover 放个链接 链接:https://pan.baidu.com/s/1UiUQZtE99fMNDe1f2gOnlg 提取 ...
- 剑指offer 66. 构建乘积数组(Leetcode 238. Product of Array Except Self)
剑指offer 66. 构建乘积数组 题目: 给定一个数组A[0, 1, ..., n-1],请构建一个数组B[0, 1, ..., n-1],其中B中的元素B[i] = A[0] * A[1] * ...