您的位置:

this.$router.params完全指南

一、路由参数概述

在Vue.js中,我们可以使用Vue Router来进行路由控制,实现SPA(单页面应用)的开发。而路由参数(Route Params)则是在路由链接中传递的参数,例如:

    <router-link :to="'/user/'+userId">用户详情</router-link>

这里的userId就是一个路由参数。在使用Vue Router时,我们可以通过this.$router.params来获取到路由参数。这个对象是一个键值对,键为路由参数名称,值为对应的参数值。

二、获取路由参数

获取路由参数的方式非常简单,只需要在组件中使用this.$route.params即可,例如下面的代码:

    
        export default {
            name: 'UserDetail',
            data() {
                return {
                    userId: this.$route.params.userId
                }
            }
        }
    

这里通过this.$route.params.userId获取到了路由参数中的userId,并将其作为data数据的初始值。在实际开发中,我们也可以在组件的生命周期函数中获取路由参数,例如在mounted函数中,这样可以确保路由参数已经准备好。

三、动态路由参数

在Vue Router中,路由参数可以是动态的。这意味着我们可以在路由链接中设置一个参数名称,然后在组件中根据这个参数名称来动态获取参数值。例如:

    
        const routes = [
            {
                path: '/user/:userId',
                name: 'user',
                component: UserDetail
            }
        ];
    

这里使用了冒号来定义了一个动态参数userId,这意味着用户可以通过不同的userId值来访问这个路由。在UserDetail组件中,我们可以通过this.$route.params.userId获取到访问时传递进来的userId值,无论是通过路由链接还是通过编程式导航的方式。

四、路由参数的变化

当路由参数变化时,组件也需要重新渲染,并且需要重新获取路由参数。在Vue.js中,我们可以使用watch来监听路由参数的变化,例如下面的代码:

    
        export default {
            name: 'UserDetail',
            data() {
                return {
                    userId: this.$route.params.userId
                }
            },
            watch: {
                '$route.params': {
                    handler: function(newParams, oldParams) {
                        this.userId = newParams.userId;
                    },
                    immediate: true
                }
            }
        }
    

这里使用了$watch,监听了$route.params的变化。当路由参数发生变化时,会执行handler函数,从而重新获取路由参数。由于我们设置了immediate为true,因此在组件挂载后就立即执行一次。

五、路由参数的传递

在Vue.js中,我们可以使用props来实现父组件向子组件传递数据。在路由中传递参数也是同样的道理,只需要在路由配置文件中设置props为true,在组件中就可以直接使用props来获取路由参数了。

    
        const routes = [
            {
                path: '/user/:userId',
                name: 'user',
                component: UserDetail,
                props: true
            }
        ];
    

这里设置props为true,意味着将路由参数作为组件的props传递给了子组件。在UserDetail组件中,我们就可以直接使用props来获取路由参数。

    
        export default {
            name: 'UserDetail',
            props: ['userId'],
            ...
        }
    

这里使用了props来定义了一个userId属性,作为路由参数的传递值。在实际使用时,我们只需要在组件中引用props即可。

六、小结

在Vue.js中,this.$router.params是一个非常重要的对象,将路由参数以键值对的形式进行了封装。我们可以使用它来动态获取路由参数、监听路由参数的变化、传递路由参数等等。只有深刻理解和熟练掌握了这个对象,才能在Vue.js的开发中游刃有余。

this.$router.params完全指南

2023-05-16
印象笔记记录java学习(Java成长笔记)

2022-11-12
java方法整理笔记(java总结)

2022-11-08
java学习笔记(java初学笔记)

2022-11-14
java笔记,大学java笔记

2022-11-28
java笔记,尚硅谷java笔记

2022-12-01
jsp程序开发学习笔记2,jsp程序设计题库

本文目录一览: 1、《JSP&Servlet学习笔记》pdf下载在线阅读,求百度网盘云资源 2、林信良编著jsp&servlet学习笔记第2版课后答案吗 3、jsp有没有快速掌握的办法呀? 4、要学J

2023-12-08
c语言考试是不是全部都笔试,c语言考试是不是全部都笔试

2022-11-28
java客户端学习笔记(java开发笔记)

2022-11-14
python基础学习整理笔记,Python课堂笔记

2022-11-21
发篇java复习笔记(java课程笔记)

2022-11-09
mysql数据库完整笔记(mysql数据库数据)

2022-11-13
数据库的笔记mysql,数据库管理系统笔记

2022-11-24
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
python课堂整理32(python笔记全)

2022-11-12
重学java笔记,java笔记总结

2022-11-23
我的python笔记06(Python)

2022-11-14
c语言知识笔记,c语言最全笔记

2023-01-04
基础c语言笔记,C语言笔记

2023-01-06
关于已前的学习笔记java的信息

2022-11-18