Vue: получить параметры URL - PullRequest
Новая
       3

Vue: получить параметры URL

0 голосов
/ 14 сентября 2018

По информации из документации. Я могу получить параметры из URL-адреса и передать их компоненту в качестве параметра. https://router.vuejs.org/guide/essentials/passing-props.html#function-mode

Я пробую это: 

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

var router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: App, props: (route) => ({ query: route.query.q }) }
      ]
})

new Vue({
    router,
  el: '#app',
  render: h => h(App),
})

App.vue: 

<script>
  export default {
    name: 'app',
    data () {
      return {

      }
    },
    mounted: function() {
      console.log(this.query)
    },
  }
</script>

В консоли:

неопределенный

Как правильно получить параметры из URL?

1 Ответ

0 голосов
/ 14 сентября 2018

Когда вы используете vue-router, $route объект прикрепляется к каждому компоненту, который вы создаете. В этом $route компоненте у вас есть query объект. Именно в этом объекте запроса вы найдете ваши параметры.

Таким образом, вместо записи console.log(this.query), вы должны написать console.log(this.$route.query), вы получите объект, содержащий все параметры, переданные в URL.

Это доступно по умолчанию, поэтому нет необходимости писать props: (route) => ({ query: route.query.q }), вы можете просто написать: { path: '/', component: App }

...