如何有条件地将查询参数添加到 Vue.js 中的路由？答案

【问题标题】：How to conditionally add query parameter to route in Vue.js?如何有条件地将查询参数添加到 Vue.js 中的路由？
【发布时间】：2018-08-29 13:33:07
【问题描述】：

单击按钮后，我正在使用vue-router 重定向到新 URL。如果实际填写了查询参数，我希望路由器只在 URL 中添加一个查询参数。所以如果是null，它应该不添加参数。

目前这没有按预期工作。看看下面的代码 sn-p（选择每个选项并单击按钮）。

（您似乎无法在 Stackoverflow 上使用路由，所以请查看 JSFiddle 上的 sn-p：https://jsfiddle.net/okfyxtsj/28/）

Vue.use(VueRouter);

new Vue({
  el: '#app',
  router: new VueRouter({
    mode: 'history',
  }),
  computed: {
  	currentRoute () {
    	return this.$route.fullPath
    }
  },
  data () {
  	return {
    	some: this.$route.query.some || null      
    }
  },
  template: '<div><select v-model="some"><option :value="null">Option (value = null) which leaves empty parameter in URL</option><option value="someParameter">Option (value = someParameter) which shows parameter with value in URL</option><option :value="[]">Option (value = []) which removes parameter from URL</option></select><br><button @click="redirect">Click me</button><br><br><div>Current Path: {{ currentRoute }}</div></div>',
  methods: {
  	redirect () {
    	this.$router.push({
        path: '/search',
        query: {
          some: this.some || null
        }
      })
    }
  },
  watch: {
    '$route.query': {
      handler(query) {
      	this.some = this.$route.query.hasOwnProperty('some') ? this.$route.query.some : null
      },
    },
  },
  watchQuery: ['some']
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<div id="app"></div>

当some 为null 时，该参数仍将添加到URL。当some 为空数组时，不会添加到 URL 中。

我不想使用空数组作为默认值，因为该值应该始终是字符串。

那么，如果查询参数包含null 以外的值，我如何确保仅将查询参数添加到新路由中？

【问题讨论】：

如果我理解正确，您是在问如何将query 对象添加到传递给$router.push 的参数中，前提是this.some 变量是真实的。 jsfiddle.net/0bcd6gt2
感谢您的回复和sn-p。我希望有一种方法，无需在将每个变量添加到路由器之前手动检查它。

标签： javascript vue.js vue-router

【解决方案1】：

使用简单的if-else 或ternary 构造。也更喜欢 some 的计算属性而不是观察者：

Vue.use(VueRouter);

new Vue({
    el: '#app',
    router: new VueRouter({
        mode: 'history'
    }),
    computed: {
        some() {
            return this.$route.query.some || null;
        }
    },
    data() {
        return {};
    },
    methods: {
        redirect() {
            const routeConfig = this.some
                ? { path: '/search', query: { search: this.some } }
                : { path: '/search' };

            this.$router.push(routeConfig);
        }
    },
    // Remaining config like template, watchers, etc.
});

【讨论】：