Html 访问VueJS中的查询字符串

Html 访问VueJS中的查询字符串,html,express,url,vue.js,vue-router,Html,Express,Url,Vue.js,Vue Router,我刚刚开始使用VueJS,我真的很喜欢它!:)我想将querystring中的值保存到VueJS变量中-这在Handlebar+express中非常简单,但在Vue中似乎更难 本质上,我是在寻找类似的东西- http://localhost:8080/?url=http%3A%2F%2Fwww.fake.co.uk&device=all const app = new Vue({ ... data: { url: req.body.url,

我刚刚开始使用VueJS,我真的很喜欢它!:)我想将querystring中的值保存到VueJS变量中-这在Handlebar+express中非常简单,但在Vue中似乎更难

本质上,我是在寻找类似的东西-

http://localhost:8080/?url=http%3A%2F%2Fwww.fake.co.uk&device=all


const app = new Vue({
    ...
    data: {
        url: req.body.url,
        device: req.body.device
    }
    ...
});
谷歌似乎给我指出了
vue路由器
,但我不确定这是否真的是我需要的/如何使用它。我目前正在使用express处理我的后端逻辑/路由

谢谢


Ollie

您可以将所有参数放入url的哈希中,例如:

window.location.hash='your data here you will have to parse to'
它将更改您的url—
#


或者,如果您坚持使用

中的一种解决方案将它们作为查询参数(后面是什么?),您可以将所有参数放入url的哈希中,例如:

window.location.hash='your data here you will have to parse to'
它将更改您的url—
#


或者,如果您坚持使用

中的一种解决方案将它们作为查询参数(后面是什么?),您可以使用URLSearchParams和polyfill来确保它在大多数web浏览器上都能正常工作

// Assuming "?post=1234&action=edit"
var urlParams = new URLSearchParams(window.location.search);

console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"
资料来源:

URLSearchParams

另请参见:

您可以使用
URLSearchParams
和polyfill来确保它在大多数web浏览器上都能正常工作

// Assuming "?post=1234&action=edit"
var urlParams = new URLSearchParams(window.location.search);

console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"
资料来源:

URLSearchParams

另请参见:

可能重复的可能重复的