VueJS中如何在Props初始化前获取路由Query参数？

问题核心 #

你当前的写法存在两个关键问题：

• props默认值函数执行时，组件实例尚未初始化，无法通过this访问$route
• props初始化时机早于created钩子，导致默认值逻辑里拿不到路由参数

可行解决方案 #

方案1：路由配置映射props（推荐，解耦组件与路由）

在路由配置文件中，给/administration路由开启props的路由映射模式，直接把query参数转为组件props：

// 路由配置文件（如router/index.js）
{
  path: '/administration',
  name: 'accounts-admin',
  component: () => import('@/components/AccountAdmin.vue'),
  // 将query参数映射为组件props
  props: route => ({
    myParam: route.query.myParam
  })
}

修改AccountAdmin.vue代码，直接接收映射后的props并计算默认值：

function expandView(myParam1) {  
  return myParam1 !== '' ? 'combine' : 'nonCombine';
}

export default {  
  name: 'accounts-admin',
  props: {
    myParam: {
      type: String,
      default: ''
    },
    currentTabIndex: {
      type: String,
      default() {
        return expandView(this.myParam);
      }
    }
  },
  created() {
    if (this.myParam) {
      console.log('参数已获取:', this.myParam);
    } else {
      console.log('无参数');
    }
  }
}

方案2：created钩子中手动更新值

若不想修改路由配置，可通过data属性中转，在created钩子中拿到参数后更新：

function expandView(myParam1) {  
  return myParam1 !== '' ? 'combine' : 'nonCombine';
}

export default {  
  name: 'accounts-admin',
  data() {
    return {
      localTabIndex: this.currentTabIndex
    }
  },
  props: {
    currentTabIndex: {
      type: String,
      default: 'nonCombine'
    }
  },
  created() {
    const myParam1 = this.$route.query.myParam || '';
    this.localTabIndex = expandView(myParam1);
  }
}

模板中使用localTabIndex替代原currentTabIndex。

方案3：监听$route变化处理参数

如果页面可能在不刷新的情况下更新query参数，用watch监听路由变化：

function expandView(myParam1) {  
  return myParam1 !== '' ? 'combine' : 'nonCombine';
}

export default {  
  name: 'accounts-admin',
  data() {
    return {
      localTabIndex: 'nonCombine'
    }
  },
  created() {
    this.updateTabIndex(this.$route.query.myParam);
  },
  watch: {
    '$route'(newRoute) {
      this.updateTabIndex(newRoute.query.myParam);
    }
  },
  methods: {
    updateTabIndex(myParam) {
      this.localTabIndex = expandView(myParam || '');
    }
  }
}

修正Editfile.vue代码 #

原代码存在语法错误，修正后：

handleSubmitCallback({ error }) {  
  if (!error) {
    this.$router.push({ path: '/administration', query: { myParam: 'abc' } });
  }
}

内容的提问来源于stack exchange，提问作者Jay patel