Vue：获取网址参数

Posted 2023-02-22

【中文标题】Vue：获取网址参数

【英文标题】：Vue: get url params

【发布时间】：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 的参数？

【参考方案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