Vue：获取网址参数答案

【问题标题】：Vue: get url paramsVue：获取网址参数
【发布时间】：2019-02-18 23:33:01
【问题描述】：

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

【问题讨论】：

标签： javascript vue.js vue-router

【解决方案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 }

【讨论】：