vue页面跳转并传递参数保存参数到网址?a=&b= 解决刷新页面无法保存接收到的参数情况

吴冬雪~

已于 2023-09-17 16:23:52 修改

阅读量1.8k

点赞数

分类专栏： Vue 文章标签： js获取url中的中文参数出现乱码获取url地址中的参数 vue跳转页面保存参数

于 2019-05-28 17:27:30 首次发布

本文链接：https://blog.csdn.net/qq_37548296/article/details/90643224

版权

Vue 专栏收录该内容

34 篇文章 4 订阅

订阅专栏

second.vue

<!-- 点击el-row 跳转到/artistDetails 页面 -->
<el-row v-for="(item,index) in list" :key="index" @click.native="artClick(item)">
    <el-col></el-col>
</el-row>

artClick(item) {      
    this.$router.push({
        // 优化 刷新网页 获取不到数据 页面为空的问题
        path: "/artistDetails" + "?content_id=" + item.content_id + "&sourc_site=" + item.sourc_site + "&source=" + item.source + "&name=" + item.title,
    });
},

artistDetails.vue

mounted() {
    this.initRequest()
},
methods: {
    // 获取url地址中的参数
    initRequest() {
        var url = window.location.href.split("?");
        if (url.length > 1) {
            var theRequest  = new Object();
            var strs = url[1].split("&");
            for (var i = 0; i < strs.length; i++) {
                // decodeURI() 解决js获取url中的中文参数出现乱码 之前用了unescape()会出现乱码 
                theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);  
            }
            this.theUrlParame = theRequest // theUrlParame 定义在data中 以后使用会比较方便
            return theRequest;
        } else {
            return null;
        }
    },
}