开发者社区 问答 正文

vue怎么传值跳转到另一个html页面:报错

我想通过$router.push()来进行页面跳转传参,我应该怎么写。(ps:我这个项目是都是直接用script标签引入Vue的文件的)

我执行Path这个函数,想要传递数据跳转到sort-add.html这个页面,要怎么写?这个页面现在得到的结果一直是undefined

展开
收起
kun坤 2020-06-14 09:09:47 1504 分享 版权
阿里云 AI 助理回答

在Vue中,使用$router.push()进行页面跳转并传递参数时,通常涉及Vue Router的使用。但是,您提到项目是直接通过script标签引入Vue文件的,这可能意味着您没有使用Vue CLI创建项目或未配置Vue Router。如果确实没有使用Vue Router,那么直接使用$router.push()方法将不可行。

不过,您仍然可以通过修改URL的查询字符串或者利用Vue的状态管理(如Vuex)来间接实现参数传递。这里提供一个简单的方法,即通过修改URL的查询字符串来传递参数:

function Path(data) {
    // 假设data是一个对象,例如:{ id: 1, name: 'example' }
    let queryString = '';
    for (let key in data) {
        if (queryString !== '') queryString += '&';
        queryString += encodeURIComponent(key) + '=' + encodeURIComponent(data[key]);
    }

    // 假设当前页面URL为http://yourdomain.com/currentPage.html
    // 跳转到sort-add.html并附加查询字符串
    window.location.href = `sort-add.html?${queryString}`;
}

然后,在sort-add.html页面中,您需要解析URL的查询字符串来获取这些参数。可以使用以下JavaScript代码来获取查询参数:

function getQueryParams() {
    const paramString = window.location.search.substr(1);
    const paramArray = paramString.split('&');
    const params = {};
    for (let i = 0; i < paramArray.length; i++) {
        const param = paramArray[i].split('=');
        params[param[0]] = decodeURIComponent(param[1]);
    }
    return params;
}

// 使用示例
const params = getQueryParams();
console.log(params.id); // 如果有id参数,则会输出对应的值

请注意,这种方法较为基础,对于大型应用或需要复杂导航管理的应用来说,推荐集成Vue Router以获得更佳的路由控制和用户体验。

有帮助
无帮助
AI 助理回答生成答案可能存在不准确,仅供参考
0 条回答
写回答
取消 提交回答