vue开发常见问题集锦（一）——vue获取参数，状态数据

canyuegongzi

于 2019-03-31 20:40:59 发布

阅读量960

点赞数

分类专栏： JS vue

本文链接：https://blog.youkuaiyun.com/qq_37262037/article/details/88934999

版权

JS 同时被 2 个专栏收录

26 篇文章

订阅专栏

vue

11 篇文章

订阅专栏

本文介绍了一个Vue.js应用程序如何从URL中提取参数的方法，并展示了如何在组件的生命周期中使用这些参数更新状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue获取参数

export const urlPar = function (name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]); return null;
}

当vue的单页应用部署到服务器中的时候的标配链接案例

http://172.19.35.37:8081/zyglpt/front/index.html?user_id=9ffeb49b-1d50-4dcd-98e9-41702ae52057&greenhouse_id=0802&crop_id=029cd440-0ae9-4e89-8f9d-7421e0713947&aaa=11#/

当由其他页面跳转到vue的页面的时候，就可以在生命周期创建的时候获取参数。

import {mapState,mapMutations} from 'vuex';
export default {
    name: "home",
    computed:mapState({
      userInfo:state=>state.userInfo
    }),
    methods: {
      ...mapMutations([
        'changeId','changeGreenhouseId','changeCropId'
      ]),
      /*获取数据*/
      init() {
        this.changeId(urlPar('user_id'));
        this.changeGreenhouseId(urlPar('greenhouse_id'));
        this.changeCropId(urlPar('crop_id'));
      }
    },
    created: function () {
      this.init()

    }
  }