How can i get query parameters from a url in vue js

在Vue.js中，您可以使用this.$route.query来访问URL中的查询参数（也称为查询字符串）。这里$route是Vue Router的一个对象，它提供了路由的各种信息，包括当前路由的查询参数。每个查询参数都是$route.query对象的一个属性，您可以通过属性名来获取相应的值。

例如，如果URL是这样的：

shell
http://example.com/?userId=123&isAdmin=true

在您的Vue组件内部，您可以这样获取userId和isAdmin这两个查询参数：

javascript
export default {
  mounted() {
    // 获取查询参数
    const userId = this.$route.query.userId;
    const isAdmin = this.$route.query.isAdmin === 'true'; // 转换为布尔值

    console.log(userId); // 输出：123
    console.log(isAdmin); // 输出：true
  }
}

这里的mounted()是Vue组件的生命周期钩子之一，在组件被挂载到DOM后会被调用，此时是获取查询参数的好时机。

如果您需要在响应查询参数的变化，可以使用Vue的watch属性来观察$route的变化：

javascript
export default {
  watch: {
    '$route.query': {
      immediate: true, // 立即以当前值触发回调
      handler(newQuery, oldQuery) {
        // 当查询参数变化时，做一些操作
        console.log('New query params:', newQuery);
      }
    }
  }
}

在这个例子中，当URL的查询参数发生变化时，handler函数会被调用，并且得到新旧两个查询参数对象。immediate: true选项确保了在watcher创建时handler将立即以当前的查询参数值被调用。

请注意，以上例子假设您已经在Vue.js项目中设置了Vue Router。如果没有设置Vue Router，您将无法使用this.$route来获取查询参数。

试试这个代码

shell
var vm = new Vue({
  created() {
    let urlParams = new URLSearchParams(window.location.search);
    console.log(urlParams.has('yourParam')); // true
    console.log(urlParams.get('yourParam')); // "MyParam"
  },
});

更详细的答案来帮助 VueJS 新手：

• 首先定义您的路由器对象，选择您认为合适的模式。您可以在路由列表中声明您的路由。
• 接下来，您希望主应用程序知道路由器存在，因此在主应用程序声明中声明它。
• 最后，$route实例保存有关当前路由的所有信息。该代码将控制台仅记录 url 中传递的参数。（*Mounted 与 类似document.ready，即应用程序准备好后立即调用）

以及代码本身：

shell
<script src="https://unpkg.com/vue-router"></script>
var router = new VueRouter({
    mode: 'history',
    routes: []
});
var vm =  new Vue({
    router,
    el: '#app',
    mounted: function() {
        q = this.$route.query.q
        console.log(q)
    },
});

另一种方法（假设您正在使用vue-router）是将查询参数映射到路由器中的道具。然后您可以像组件代码中的任何其他 prop 一样对待它。例如添加这条路由；

shell
{ 
  path: '/mypage', 
  name: 'mypage', 
  component: MyPage, 
  props: (route) => ({ foo: route.query.foo }),  
}

然后在你的组件中你可以像平常一样添加道具；

shell
props: {
  foo: {
    type: String,
    default: null,
  }
},

然后它将可用this.foo，您可以用它做任何您想做的事情（例如设置观察者等）