Vue.js（简称 Vue）是一种开源的轻量级 JavaScript 框架，由 Evan You 于2014年首次发布。Vue 致力于在用户界面（UI）开发中实现数据与视图的双向绑定，为创建现代化 Web 应用、单页面应用（SPA）以及多种复杂界面提供了一种简洁、高效且可扩展的解决方案。

#### 核心特性

- **组件化：** Vue 包含了独立的、可复用的组件，有助于将 UI 切成逻辑部分、提高代码质量。
- **双向数据绑定：** 利用双向数据绑定，Vue 能自动更新 UI，对应数据模型发生改变时同步更新视图。
- **声明式渲染：** 编写模板完成数据驱动的视图，自动追踪依赖关系，并且在数据模型发生更改时仅重新计算最小必要部分。
- **虚拟DOM：** 通过 Vue 的虚拟 DOM 进行更效率的视图更新，降低视图更新所需的计算量。
- **响应式系统：** Vue 拥有一个响应式系统，当数据更改时会自动跟踪和更新所有相关视图。
- **易于集成：** Vue 可与其他 JavaScript 库或现有项目相互集成，同时方便和流行的前端工具链合作。

#### 主要模块

- **Vue Router：** 官方提供的路由管理器，有助于构建单页面应用程序。
- **Vuex：** 是一个状态管理库，有助于简化和规范在组件之间共享的数据和方法。
- **Vue CLI：** 是一个命令行工具，匹配各种扩展，有助于快速搭建 Vue 项目，包括开发、构建和部署。

#### 适用场景

- 单页面应用（SPA）开发：在单一页面中完成路由切换、状态管理和 UI 渲染等流程。
- Web 应用程序开发： Vue 可与其他库如 Axios 结合，方便地建立发起 HTTP 请求的 API 客户端。
- 组件库和 UI 框架：借助 Vue 的组件系统，可以构建封装的、具有丰富功能的 UI 组件和框架。
- 原型开发：使用 Vue 快速构建和验证产品原型，提高开发效率。

Vue 因易于入门、高度灵活、丰富的生态系统以及优异的性能而受到许多开发者的欢迎，是 Web 开发领域一种非常值得学习的前端框架。

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

例如，如果URL是这样的：
```
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`来获取查询参数。

试试这个代码

    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`，即应用程序准备好后立即调用）

以及代码本身：

    <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 一样对待它。例如添加这条路由；

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

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

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

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

Vue相关问题

Vuejs 如何在从 url 获取 query 参数？