vue中封装公共的方法

最新推荐文章于 2025-04-30 09:35:53 发布

舞空~

最新推荐文章于 2025-04-30 09:35:53 发布

阅读量1.5k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/weixin_44011751/article/details/118156584

版权

vue 同时被 2 个专栏收录

27 篇文章

订阅专栏

22 篇文章

订阅专栏

本文档介绍了如何在Vue.js项目中创建一个名为common的文件夹，用来存放公共文件，并在其中创建sy_util.js，用于定义公共方法，如$routerQuery。该方法解析当前URL的查询参数。在main.js中全局引入后，可以在各个页面中方便地调用这些公共方法，提升代码的可维护性和效率。

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

1.创建一个common文件夹用户存放公共文件,在文件夹中创建一个sy_util.js用于存放公共的方法,例如我下面的$routerQuery方法

sy_util.js代码:
在这里插入图片描述

export default {
    install (Vue, options) {
        Vue.prototype.$routerQuery =  () => {
            let href = location.href
            href = href.replace('%20', '+')
            let result = {}
            if (href.indexOf('?') >= 0) {
                // 取 参数
                href = href.slice(href.indexOf('?') + 1)
                let query = ''
                // 去除 # 部分
                if (href.indexOf('#') >= 0) {
                    query = href.slice(0, href.indexOf('#'))
                } else {
                    query = href
                }
                if (query) {
                    let arr1 = query.split('&')
                    arr1.map(item => {
                        let arr2 = item.split('=')
                        result[arr2[0]] = decodeURIComponent(arr2[1])
                    })
                }
            }
            return result
        }
    }
}