vue中封装公共的方法

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

sy_util.js代码:
vue中封装公共的方法_第1张图片

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
        }
    }
}
2.在main.js中全局引入上面的文件

vue中封装公共的方法_第2张图片

3.在页面中引用

vue中封装公共的方法_第3张图片

4.效果如图,根据自己需要可以在上面文件中自行添加更多公共的方法,便于整理修改

vue中封装公共的方法_第4张图片

希望文档能帮助到您,最后求个赞,谢谢~

你可能感兴趣的:(vue,js,vue,js)