Vue：获取url params

Question

根据文件中的信息。我可以从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接收参数？

Answer 1

当您使用vue-router时，$route对象将附加到您创建的每个组件上。在这个$route组件中，你有一个query对象。您可以在此查询对象中找到您的参数。

因此，您应该编写console.log(this.query)而不是编写console.log(this.$route.query)，您将获得一个包含URL中传递的所有参数的对象。

默认情况下这是可用的，所以没有必要写props: (route) => ({ query: route.query.q })，你可以写：{ path: '/', component: App }