Как условно добавить параметр запроса к маршруту в Vue.js? - PullRequest
Новая
       4

Как условно добавить параметр запроса к маршруту в Vue.js?

0 голосов
/ 29 августа 2018

Я использую vue-router для перенаправления на новый URL после нажатия кнопки. Я хотел бы, чтобы маршрутизатор только добавил параметр запроса в URL, если параметр запроса фактически заполнен. Так что если это null, то следует , а не добавить параметр.

Сейчас это работает не так, как ожидалось. Взгляните на следующий фрагмент кода (выберите каждый из вариантов и нажмите кнопку).

(похоже, вы не можете использовать маршрутизацию в Stackoverflow, поэтому, пожалуйста, взгляните также на фрагмент JSFiddle: 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?

1 Ответ

0 голосов
/ 29 августа 2018

Используйте простую конструкцию 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.
});
...