vue工作开发总结（一）---- 路由参数解耦

最新推荐文章于 2023-02-17 08:44:43 发布

随风小薇

最新推荐文章于 2023-02-17 08:44:43 发布

阅读量817

点赞数 1

分类专栏： vue 文章标签： vue js

本文为博主原创文章，未经博主允许不得转载

本文链接：https://blog.youkuaiyun.com/qq_39197547/article/details/106494038

版权

vue 专栏收录该内容

34 篇文章 ¥299.90 ¥399.90

订阅专栏

本文探讨了在Vue开发中如何避免组件与路由参数的高度耦合，提出使用props进行解耦，以增强组件的灵活性。通过这种方式，组件可以独立于特定URL工作。了解更多详情，请参阅官方文档：https://router.vuejs.org/zh/guide/essentials/passing-props.html。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般在组件内使用路由参数，大多数人会这样做：

export default{
    methods:{
        getParamsId(){
            return this.$route.params.id
        }
}

在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的url上使用，限制了他的灵活性

正确的做法应该是使用props解耦：

const router =new VueRouter({
    routes:[{
        path:"user/:id",
        component:User,
        props:true
    }]
})
这样将路由props属性设置为true后，组件内可以通过props接受到params参数

export default {
    props:['id'],
    methods:{
        getParamsId(){
            return this.id
        }
    }
}

宁外还可以通过函数模式来返回props
const router = new VueRouter({
    routes:[{
        path:'user/:id',
        component:User,
        props:(route)=>({
            id:route.query.id
        })
    }]
})

文档查看地址：https://router.vuejs.org/zh/guide/essentials/passing-props.html