vue路由传参解耦

最新推荐文章于 2023-02-22 14:10:35 发布
最新推荐文章于 2023-02-22 14:10:35 发布
阅读量800 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40428678/article/details/105827016
版权

在我们实现页面接收参数的时候，通常会使用$route.query或者 $route.params去获取路由中传递的参数，使用路由解耦就不需要这样获取，直接用props接收参数。

实现方式

1、布尔模式($route.params传参)
在这里插入图片描述
在组件中用props接收
在这里插入图片描述
2、对象模式($route.params传参)

如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

在这里插入图片描述
在组件中用props接收。
在这里插入图片描述
3、函数模式($route.query传值)
在这里插入图片描述

在组件中用props接收。
在这里插入图片描述

路由组件官方示例请看路由组件传值；

路由组件传值更多用法请看路由组件传值；

想看更多点击我的博客

码知秋
关注
专栏目录
vue-router路由传参的几种方式-案例
JackieDYH的博客
08-25 4030
说明 点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据 刷新页面参数丢失 编程式导航 方法一：通过 params 传参 路由配置如下 { path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail } 通过 $router.push 中 path 携带参数的方式 // 列表中的传参 goDetail(row) { this.$router..
Vue路由传参、解耦
希米鹿
07-18 388
对于 router-link 来讲，有两种传参方式： 1. <router-link :to="{name: 'About', params: { id: 340 } }">About</router-link> 对应效果： params不出现在url里面。可以使用代码查询： 1. $route.params 2. this.$route.params 2. <router-link :to="{path: 'about', query: { i
Vue Router传参解耦
ZhuAiQuan的博客
11-19 608
vue路由传参有params和query，实际开发中获取vue路由的参数，需要在组件中使用 $route， 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 vue router为我们提供了路由解耦的功能，取代在组件上使用$route来获取路由参数； 1、布尔模式 在路由上新增一个属性props并设置为true 路由 { path: 'detail/:id', name: 'customer-detail', meta: { title
vue-router路由组件传参解耦
beichen3997的博客
12-18 894
这里写自定义目录标题 vue-router路由组件传参解耦 布尔模式 对象模式 函数模式 vue-router路由组件传参解耦 路由组件中使用$route取路由参数会导致该路由与该组件形成高度绑定耦合 原始取参方式 // 路由组件 const User = { template: '<div>User {{ $route.params.id }...
vue路由参数解耦
weixin_45259626的博客
07-09 589
我们vue项目中经常在组件内使用路由参数最开始我常用下面的写法： export default { methods: { getParamsId() { return this.$route.params.id } } } 在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 正确的做法是通过 props 解耦 const router = new VueRouter
【vue】--路由解耦 传值的方式
weixin_30590285的博客
09-04 377
路由解耦 1、只有动态路由才能用路由解耦 2、在定义路由的时候通过/:属性的方式来定义传递参数的属性 3、需要在定义路由的时候设置属性props:true 4、在进行路由跳转的时候通过/值得方式进行传递数据 5、在需要接收参数的组件中通过props进行接收即可 ...
对于vue路由传参方式的总结
苏琨博的博客
06-21 457
在vue-router中想跳转有两种实现的方式： 标签实现：<router-link to="url"></router-link> js实现：this.$router.push(url) //跳转到指定路由，可后退 this.$router.replace(url) //跳转到指定路由，不可后退 在这里对应的路由传参方式就有两套，但实际上两者传参的方法是等价...
vue 路由id_vue路由详解
weixin_33518100的博客
12-23 2816
自己看vue文档，难免有些地方不懂，自己整理一下，主要是vue-router具体实现的操作步骤。安装直接下载/CDNUnpkg.com提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像在 Vue 后面加载 vue-router，它会自动安装的：NPMnpm install vue-router如果在一个模块化工程中使用它，必须要通过 Vue.use()...
Vue路由组件传参
ovehan的博客
03-19 171
路由组件传参 在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性 路由变化时获取路由参数需要watch监听$route.params或$route.query,书写比较麻烦 路由属性传值有三种模式 1.布尔模式 如果 props 被设置为 true，route.params 将会被设置为组件属性。 注意：要在组件中配置props，否则即使设置为true直接取值是取不到的 router.js路由配置 { path: '/a
Vue 路由 router-路由组件传参 （重点）
weixin_42390302的博客
09-30 244
Vue 路由 router-路由组件传参 （重点） 为什么要用路由组件传参呢？ 在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的URL上使用，限制了灵活性。通过props来解耦。 布尔模式：如果 props 被设置为 true，route.params 将会被设置为组件属性。 核心代码： <script> const position = { //布尔模式 props:['id'], t
vue路由解耦
alpha_xu_vvvvv的博客
01-19 568
1、params 传参 this.$router.push({name: ‘…’, params: {id: …}}) params传参, 路径不能使用path 只能使用name，否则params将无效。 取数据： this.$route.params.id 2、query 传参 params传参, 路径可以使用path或者name this.router.push(path:′.....′,query:id:.....)取数据：this.router.push({path: '.....', query:
vue 路由解耦
zhangwenwu2的博客
03-05 2616
路由解耦 1、只有动态路由才能用路由解耦 2、在定义路由的时候通过/:属性的方式来定义传递参数的属性 3、需要在定义路由的时候设置属性props:true 4、在进行路由跳转的时候通过/值得方式进行传递数据 5、在需要接收参数的组件中通过props进行接收即可 ...
深入简出vue路由——5.路由组件传参
Leon的博客
02-02 1714
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 使用 props 将组件和路由解耦： html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> script src="https://unpkg.com/vue/dist/vue.js
Vue路由传参与props解耦详解
前端成长之路
07-28 1903
路由传参的两种方式与props的三种用法；
Vue-css代码太多，如何解耦？
最新发布
52HZ的鱼
02-22 387
scoped看起来很好用，当时在Vue项目中，当我们引入第三方组件库时(如使用vue-awesome-swiper实现移动端轮播)，需要在局部组件中修改第三方组件库的样式，而又不想去除scoped属性造成组件之间的样式覆盖。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。css对子组件不生效，可以在子组件的style标签里也使用scoped，这样可以使一个页面对应自己的css,避免影响到其他页面。一、把css代码拷贝到一个独立的文件里。
前端开发——vue路由参数解耦
helloyangkl的博客
02-17 447
前端开发——vue路由参数解耦
vue路由器参数解耦
weixin_47581888的博客
11-23 209
通常情况下，都是用如下方法获取参数 export default { methods: { getRouteParamsId() { return this.$route.params.id } } } 在组件内部使用 $route 会对某个URL产生强耦合，这限制了组件的灵活性。 正确方案：向路由器添加props const router = new VueRouter({ routes: [{ path: '/:id', component: C
Vue Router：使用 props 将组件和路由解耦
kufei88的专栏
04-01 1810
在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 可以使用props将组件和路由解耦。 一 路由配置（布尔模式）： import Vue from "vue"; import Router from "vue-router"; import Home from "./views/Home.vue"; import ...
vue工作开发总结（一）---- 路由参数解耦
wangweiruning的博客
06-02 773
一般在组件内使用路由参数，大多数人会这样做： export default{ methods:{ getParamsId(){ return this.$route.params.id } } 在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的url上使用，限制了他的灵活性 正确的做法应该是使用props解耦： const router =new VueRouter({ routes:[.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值