vue路由解耦

最新推荐文章于 2023-07-29 16:08:41 发布
最新推荐文章于 2023-07-29 16:08:41 发布
阅读量558 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alpha_xu_vvvvv/article/details/122582304
版权

1、params 传参
this.$router.push({name: ‘…’, params: {id: …}})
params传参, 路径不能使用path 只能使用name，否则params将无效。

取数据： this.$route.params.id

2、query 传参
params传参, 路径可以使用path或者name

this. r o u t e r . p u s h ( p a t h : ′ . . . . . ′ , q u e r y : i d : . . . . . ) 取 数 据 ： t h i s . router.push({path: '.....', query: {id: .....}}) 取数据： this. router.push(path:′.....′,query:id:.....)取数据：this.route.query.id

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

vue官方：

https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%B8%83%E5%B0%94%E6%A8%A1%E5%BC%8F
alpha_xu_vvvvv
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue工作开发总结（一）---- 路由参数解耦
wangweiruning的博客
06-02 758
一般在组件内使用路由参数，大多数人会这样做： export default{ methods:{ getParamsId(){ return this.$route.params.id } } 在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的url上使用，限制了他的灵活性 正确的做法应该是使用props解耦： const router =new VueRouter({ routes:[.
iOS路由（MGJRouter）的实现
01-20
Router就像是个调度中心，各个模块通过路由调度其他模块，模块之间不需要相互引用，调度方式更加统一，更加自由，能够实现解耦的作用，同时也为之后的组件化开发提供了基础。 路由选择 目前github优秀的路由设计...
vue 路由解耦
zhangwenwu2的博客
03-05 2606
路由解耦 1、只有动态路由才能用路由解耦 2、在定义路由的时候通过/:属性的方式来定义传递参数的属性 3、需要在定义路由的时候设置属性props:true 4、在进行路由跳转的时候通过/值得方式进行传递数据 5、在需要接收参数的组件中通过props进行接收即可 ...
vue的路由解耦
weixin_43453916的博客
04-08 383
import Vue from 'vue' import Router from 'vue-router' import Home from 'views/Home.vue' import store from '@/store' Vue.use(Router) let routes = [ { path: '/', name: 'home', component:...
【vue】--路由解耦 传值的方式
weixin_30590285的博客
09-04 373
路由解耦 1、只有动态路由才能用路由解耦 2、在定义路由的时候通过/:属性的方式来定义传递参数的属性 3、需要在定义路由的时候设置属性props:true 4、在进行路由跳转的时候通过/值得方式进行传递数据 5、在需要接收参数的组件中通过props进行接收即可 ...
Springboot+VUE Web开发实践.pdf
11-23
- Vue路由：使用vue-router实现页面间的导航，管理应用的状态和视图。 - Vuex状态管理：用于集中管理应用的共享状态，解决组件间通信问题。 - Vue CLI工具：用于快速初始化项目，包含自动化构建和测试等功能。 ...
vue常见面试题.docx
03-13
- **视图、数据、结构分离**：解耦视图和数据，使得代码更易于管理和维护。 - **虚拟DOM**：减少DOM操作带来的性能损耗，提高应用性能。 2. **父组件向子组件传递数据**：通过`props`属性实现，子组件可以通过`...
vue相关知识点——浅浅笔记
06-22
Vue 提供的一些 web 开发常见的功能：视图与数据解耦（分离）、可复用组件（按钮..）、前端路由、状态管理、虚拟 DOM 等。 2. Vue 语法：插值操作、v-once 指令、v-html 指令、v-text 指令、v-pre 指令、v-cloak ...
vue-router.zip
04-08
主要是一些关于vue-router的使用操作和用法解释，比如简单的路由使用，$router属性，动态路由，路由嵌套，命名视图，参数解耦
vue-router 路由参数解耦
weixin_38838750的博客
10-23 323
项目场景： vue-router 问题描述： 跳转路由传参，使用路由参数解耦 原因分析： name 方式跳转路由，可以使用路由参数解耦 path 方式跳转路由，不可以使用 解决方案： name 方式跳转路由，可以使用路由参数解耦 { path: '/video', name: 'Video', meta: { title: '视频' }, props: true, component: () => import(/* w
前端开发——vue路由参数解耦
helloyangkl的博客
02-17 419
前端开发——vue路由参数解耦
vue路由参数解耦
weixin_45259626的博客
07-09 579
我们vue项目中经常在组件内使用路由参数最开始我常用下面的写法： export default { methods: { getParamsId() { return this.$route.params.id } } } 在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 正确的做法是通过 props 解耦 const router = new VueRouter
Vue Router 路由组件传参
qq_26642611的博客
12-25 309
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 使用 props 将组件和路由解耦： 取代与 $route 的耦合 const User = { template: '<div>User {{ $route.params.id }}</div>' } const router = new VueR...
vue耦合与解耦_裁剪机与图像解耦的简单vue组件
cuk5239的博客
07-27 547
vue耦合与解耦 Vue作物 (vue-crop) a simple vue component of croper, Decoupling with Images, The maximum minimum aspectRatio value can be set. 裁剪器的一个简单vue组件，与图像分离，可以设置最大最小aspectRatio值。 安装与使用 (install & ...
路由组件传参-props解耦方式（主要）
weixin_30410999的博客
06-10 1017
在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 使用props将组件和路由解耦： 取代与$route的耦合 const User = { template: '<div>User {{ $route.params.id }}</div>' } const router = ...
Android 解耦（二）基于路由的解耦
夏夏的博客
07-29 207
在安卓开发中，随着项目的复杂度增加，模块化（或组件化）开发方式越来越受到开发者的青睐。模块化开发可以将一个大型项目拆分成多个相对独立的模块，每个模块负责一个功能或业务场景，从而提高代码的可读性、可维护性和可复用性。但是模块化开发也带来了一些挑战，其中之一就是如何实现模块间的解耦和通信。
VUE路由参数解耦
程序员劝退师的博客
04-14 165
一般在组件内使用路由参数，大多数人会这样做： export default { methods: { getParamsId() { return this.$route.params.id } } } 在组件中使用$route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 正确的做法是通过props解耦 const router = new VueRouter({ routes
vue路由传参解耦
fortune丶的blog
05-04 763
在我们实现页面接收参数的时候，通常会使用$route.query或者 $route.params去获取路由中传递的参数，
vue3路由组件通信
最新发布
08-29
在 Vue 3 中，路由组件之间的通信可以通过多种方式实现。下面是一些常见的方法： 1. 使用 Vuex：Vuex 是 Vue.js 的官方状态管理库。你可以将需要共享的数据存储在 Vuex 的状态树中，并在需要的组件中访问和修改这些...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值