使用 Vue.js 和 URI.js 将对象写入 location.hash

Question

我有一个项目列表和一个过滤器。我想将过滤器选项存储在 window.location.hash 属性中，这样我就有了很好的可共享网址。

我正在努力构建一个可用的散列片段，使用 URI.js。

Vue.js 2.4.4
URI.js 1.19.0

到目前为止我做了什么

import Uri from "urijs";
let UriFragment = require('../../node_modules/urijs/src/URI.fragmentURI.js');

// UpdateHash method
let uri = new Uri(window.location.href);
uri.fragment({
    providers: ['best', 'bestest'],
    sort: 'recommended'
});

window.location.hash = uri.fragment();

发生了什么事？

example.com/list-of-things#![object Object]

我预期会发生什么

根据有关 'fiddling with the fragment' http://medialize.github.io/URI.js/

的文档

example.com/list-of-things#providers=best&providers=bestest&sort=recommended

问题

如何确保 URI.js 的插件已加载并正常工作？然后继续弄清楚为什么它不输出格式化的 uri 片段。

Answer 1

我一发帖就知道，我会找到答案的。

我试图使用 URI.fragmentURI.js 的代码，而实际上我想要 URI.fragmentQuery.js。

为库切换到正确的插件已经解决了这个问题。

使用 Vue.js 和 URI.js 将对象写入 location.hash

Writing an object to the location.hash using Vue.js and URI.js

uri

vue.js

到目前为止我做了什么

发生了什么事？

我预期会发生什么

问题