描述：
在使用Quasar框架进行前端开发过程中，遇到各种各样的小问题，在此记录一下。
路由的正则匹配
描述：
在通过$route.path获取当前路径下路由时，存在末尾需要或不需要/的问题。
如：/a或/a/路由到/a/b路由下，通过$route.path + '/b'可能存在/a//b的情况，而导致路由匹配失败到404页面。
解决：
可通过对$route.path进行处理，保证最后路径有/或者没有。
用到了Javascript字符串的replace方法。
string.replace(/\/*$/,'')即保证了移出字符串末尾的/
string.replace(/\/*$/,'/')即保证了字符串末尾必存在/
编程式路由导航
描述：
在做页面条件筛选过程中，填好了筛选条件后，点击搜索，但是页面url并没有带上搜索条件。
达到效果应该：a/b?xxx=xxx
解决：
可通过vue-router的编程式路由导航来实现。
当进行条件筛选，进行搜索时，将原路径$router.push到带有query的路径下，由于路由目的地和之前导航路由相同，参数或查询的改变并不会触发进入/离开的导航守卫。
因此，通过此种方式动态的添加查询到路由上，并通过监听路由的变化（beforeRouteUpdate），来实现数据的请求。
Vue组件的全局注册
描述：
某些组件，在许多页面中都会使用，如果在对应页面进行注册，后期难以维护。因此需要将部分组件进行全局注册。
解决：
利用Vue.component('xxx-xxx',xxx)来对组件进行全局注册。
axios params参数名称重复
描述：
在进行数据请求中，需要允许多个同名参数，如?a=1&a=2...
解决：
可以通过使用URLSearchParams 来配合 axios 提交重复的参数。
URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。其中 URLSearchParams.append() 插入一个指定的键/值对作为新的搜索参数，这个方法可以插入重复的值，但当使用 URLSearchParams.set() 设置同名键值时会覆盖前面的值。
注：
如果query参数中直接传入的时数组，如a=[1,2,3]，会自动转成a=1&a=2&a=3。这时候可以不用URLSearchParams
字符串数组转数字数组
描述：
将a = ["1", "2", "3"]转成a = [1, 2, 3]
解决：
使用array.map(Number)即可
网友评论