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 CLI 3创建项目时，若需生成两个独立的捆绑包（bundle），可以通过配置多页面应用来达到这个目的。以下是步骤和示例：

### 步骤 1: 安装 Vue CLI 并创建项目

首先，确保已安装Vue CLI。如果未安装，可以通过npm安装：

```bash
npm install -g @vue/cli
# 或者使用yarn
yarn global add @vue/cli
```

然后，创建一个新的Vue项目：

```bash
vue create my-project
cd my-project
```

### 步骤 2: 配置多页面应用

在项目根目录下，修改`vue.config.js`文件（如果文件不存在，需新建一个）。在这个配置文件中，你可以指定多个入口文件，每个入口文件将被打包成一个独立的捆绑包。

假设我们要创建两个捆绑包，分别为`home`和`about`：

```javascript
module.exports = {
  pages: {
    home: {
      // page 的入口
      entry: 'src/pages/home/main.js',
      // 模板来源
      template: 'public/home.html',
      // 在 dist/index.html 的输出
      filename: 'home.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Home Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'home']
    },
    about: {
      entry: 'src/pages/about/main.js',
      template: 'public/about.html',
      filename: 'about.html',
      title: 'About Page',
      chunks: ['chunk-vendors', 'chunk-common', 'about']
    }
  }
}
```

### 步骤 3: 创建相应的入口文件和模板

对于每个页面，需要创建对应的入口JS文件和HTML模板。例如：

- `src/pages/home/main.js`
- `public/home.html`
- `src/pages/about/main.js`
- `public/about.html`

### 步骤 4: 运行或构建项目

运行开发服务器查看结果：

```bash
npm run serve
```

或者构建项目：

```bash
npm run build
```

构建完成后，将在`dist`目录下看到两个独立的HTML文件（`home.html`和`about.html`），每个文件都有对应的JS和CSS捆绑包。

### 示例

这个配置允许你根据不同的页面需求加载不同的资源，非常适合大型项目，或者需要针对不同页面优化加载速度的场景。

如何使用 vue cli 3 创建两个独立的捆绑包？

在Vue.js中，当我们使用 `v-for`指令来渲染一个组件列表时，Vue推荐为每个通过 `v-for`创建的元素或组件绑定一个唯一的 `:key`属性。这个 `:key`属性是Vue用来追踪列表中每个节点的身份，从而可以高效地对虚拟DOM进行重用和重新排序。如果没有提供 `:key`，Vue将会使用非就地更新策略，可能会引发一些更新相关的问题，比如不正确的元素重用和状态保留等。

举一个简单的例子，假设我们有一个待办事项列表：  

```html
<template>
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { id: 1, text: 'Learn Vue.js' },
        { id: 2, text: 'Build a project' },
        { id: 3, text: 'Find a job' }
      ]
    };
  }
};
</script>
```

在这个例子中，虽然列表可能会正确渲染，但是因为没有为每个 `<li>`绑定 `:key`属性，Vue会在控制台发出警告。我们可以通过为每个 `<li>`添加一个唯一的 `:key`来解决这个问题，通常是使用列表中每个项目的唯一标识符：

```html
<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
    </li>
  </ul>
</template>
```

在这个修改后的例子中，我们将 `:key`设置为 `todo.id`，这样每个待办事项都有了一个独一无二的键值。通过这样做，Vue就能够更有效地更新DOM，尤其是在这个列表发生变化时（比如排序、添加或删除项目）。这样可以避免不必要的元素渲染，使得整个列表的渲染性能得到优化。

综上所述，正确使用 `:key`是保证列表渲染性能和准确性的重要实践。当您看到类似的控制台警告时，通常就是因为忘记了为列表项添加 `:key`属性。在实际开发中，我会确保遵守这个最佳实践，以避免潜在的问题，并提升应用的性能。

控制台警告：用 v-for 呈现的组件列表应具有显式键

### Vue.js中使用vue-router连接外部网站的方法

Vue.js 是一个前端JavaScript框架，主要用于构建单页应用（SPA）。它的路由管理通常通过 `vue-router` 实现，这是一个Vue.js的官方路由管理库。通常，`vue-router` 用于管理同一个Vue应用内部的路由，例如从一个组件跳转到另一个组件。然而，如果你想要从Vue应用中链接到外部网站，这通常不是`vue-router`直接处理的。

#### 方法1: 使用传统的<a>标签
最简单直接的方法是在Vue组件中使用普通的HTML `<a>` 标签。例如，如果你想链接到Google，你可以在你的Vue模板中这样写：

```html
<template>
  <div>
    访问 <a href="https://www.google.com" target="_blank">Google</a>
  </div>
</template>
```

这种方法简单明了，点击链接时将打开新的浏览器标签或窗口，导航到指定的外部URL。

#### 方法2: 通过编程方式导航
如果你需要在Vue.js代码中处理更复杂的逻辑才能决定是否要跳转到外部网站，或者你要基于某些动态数据构造URL，你可以在方法中使用`window.location`。例如：

```javascript
<template>
  <button @click="goToGoogle">访问Google</button>
</template>

<script>
export default {
  methods: {
    goToGoogle() {
      const url = "https://www.google.com";
      window.open(url, '_blank');
    }
  }
}
</script>
```

这里，我们使用JavaScript来处理点击事件，并使用 `window.open` 方法在新标签页中打开链接。

#### 方法3: 使用环境变量或配置
在一些大型项目中，外部URL可能根据开发环境而有所不同（例如开发、测试和生产环境使用不同的服务URL）。这时可以使用环境变量来管理这些URL。

```javascript
<template>
  <button @click="goToExternalSite">访问外部网站</button>
</template>

<script>
export default {
  methods: {
    goToExternalSite() {
      const baseUrl = process.env.VUE_APP_EXTERNAL_URL; // 从环境变量读取
      window.open(baseUrl, '_blank');
    }
  }
}
</script>
```

这种方法的好处是你可以在不同的部署环境中灵活管理URL，只需改变环境变量即可。

#### 结论

虽然`vue-router`是管理内部路由的强大工具，但对于外部链接，传统的HTML链接或使用JavaScript的`window.location`方法更为直接和合适。你可以根据具体需求选择最适合的方法。

Vuejs 如何连接外部网站的 vue 路由器

在 Vue 中，要防止从文本输入中按 Enter 键时提交表单，可以通过监听键盘事件并在事件处理器中调用 `event.preventDefault()` 方法来实现。这样可以阻止表单的默认提交行为。

以下是一个具体的例子：

假设我们有一个简单的 Vue 应用，其中包含一个表单，表单里有一个文本输入框和一个提交按钮。我们希望当用户在文本输入框中按下 Enter 键时，不提交表单。

HTML 部分：
```html
<div id="app">
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="inputText" @keydown.enter.prevent="handleEnter">
    <button type="submit">提交</button>
  </form>
</div>
```

Vue 实例：
```javascript
new Vue({
  el: '#app',
  data: {
    inputText: ''
  },
  methods: {
    handleEnter(event) {
      // 这里可以处理 Enter 键按下时的逻辑，但不提交表单
      console.log("Enter was pressed, but form was not submitted.");
    },
    handleSubmit() {
      // 处理表单提交的逻辑
      console.log("Form submitted with:", this.inputText);
    }
  }
});
```

在这个示例中，我们在 `<input>` 元素中使用了 `@keydown.enter.prevent`。这里的 `.prevent` 是一个修饰符，它告诉 Vue 在调用 `handleEnter` 方法之前调用 `event.preventDefault()`。这防止了默认的表单提交行为。

同时，我们在 `<form>` 元素上也使用了 `@submit.prevent`，这是为了确保在其他情况下（如点击提交按钮时）也阻止表单的默认提交行为，而改用 `handleSubmit` 方法处理提交。这种方法提供了更好的控制，确保不会意外提交表单。

这种方式使得用户体验更加友好，因为用户可能不希望仅仅因为按了 Enter 键就提交表单，特别是在一个包含多个输入字段的表单中。通过程序化地管理 Enter 键的行为，我们可以提供更符合预期的交互方式。

使用 Vue 从文本输入中按 enter 键时，禁止提交表单。

在VueJS中，当使用开发版本的Vue库时，默认会在控制台显示“development mode”警告。这旨在提醒开发者他们正在使用的是Vue的开发版本，而非生产版本。开发版本包含了有助于开发和调试的详细警告和提示，但这会增加应用程序的大小和降低运行效率。因此，一旦应用程序要部署到生产环境，就应该使用生产版本的VueJS。

### 禁用“development mode”警告的步骤

1. **使用生产版本的VueJS**：
    在应用中使用Vue的生产版本是最简单直接的方法。可以通过以下几种方式来引入生产版本的Vue：

    - 如果你是通过`<script>`标签直接在HTML中引入Vue，确保引用的是压缩版（例如，使用`vue.min.js`而不是`vue.js`）。
      ```html
      
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
      ```

    - 如果你是使用NPM或Yarn这样的包管理工具，确保在构建过程中设置了正确的环境变量来使用生产模式。例如，使用Webpack时，可以在`webpack.config.js`中设置`mode`为'production'，这将自动使用Vue的生产版本。
      ```javascript
      module.exports = {
        mode: 'production'
      };
      ```

2. **设置环境变量**：
    在开发过程中，如果暂时需要禁用警告，可以通过设置环境变量来告诉Vue不要显示开发模式下的警告和提示。
    - 对于使用Vue CLI创建的项目，可以在项目根目录下的`.env.production`文件中添加以下内容：
      ```
      NODE_ENV=production
      ```

3. **编程方式控制**：
    虽然不推荐这样做，因为这可能隐藏掉一些有用的警告和错误提示，但你也可以通过编程的方式在应用初始化时禁用Vue的警告：
    ```javascript
    Vue.config.productionTip = false;
    Vue.config.devtools = false;
    ```

### 总结
最好的做法是在部署到生产环境时使用Vue的生产版本。这不仅可以禁用开发模式下的警告，也会带来性能上的提升。通过合适配置构建工具和环境变量，可以确保在开发和生产环境中使用正确版本的Vue，从而使应用更加高效和安全。

如何禁用 VueJS 中的 “development mode ” 警告

在使用Vue CLI 3中，将背景图片应用于样式通常涉及几个步骤，主要包括如何正确地将图片路径引入到你的Vue组件中。这里是一个步骤明确的解决方案以及一个简单的例子来说明如何在Vue项目中实现这一点。

#### **步骤 1: 准备你的图片资源**

首先，确保你的图片资源已经被放在项目的合适目录中，通常是在 `src/assets`文件夹中。例如，你有一张名为 `background.jpg`的图片。

#### **步骤 2: 引入图片到组件**

在你的Vue组件中，你可以使用 `require`方法来引入图片。这是因为Vue CLI使用Webpack作为其底层打包工具，而Webpack可以处理各种静态资源的引用。

```vue
<template>
  <div class="background-image">
    
  </div>
</template>

<script>
export default {
  // 组件数据和方法
};
</script>

<style scoped>
.background-image {
  background-image: url('~@/assets/background.jpg');
  height: 100vh;
  background-size: cover;
  background-position: center;
}
</style>
```

#### **解释**

在上面的例子中，`.background-image` 类使用了 `background-image` CSS属性来设置背景图。关键点是图片的路径：

- 使用 `~` 来表示这是一个模块请求，告诉Webpack需要解析它。
- `@` 表示 `src`目录，这是Vue CLI项目的一个别名。
- `/assets/background.jpg` 是图片在 `src` 目录下的路径。

#### **总结**

这种方法的好处是可以利用Webpack的功能自动优化图片资源，比如减小图片文件大小和转换图片格式等，这可以提升最终应用的性能。此外，使用Webpack处理图片还可以享受到缓存优化等好处。

Vue cli3 在样式标记中使用背景图像

在Vue.js中，我们通常利用Vue Router进行页面路由管理。在一些场景下，我们需要在路由导航之前判断或获取一些异步数据（如用户登录状态），使用`beforeEnter`路由守卫钩子可以实现这样的需求。下面我将通过一个具体的例子来演示如何在`beforeEnter`钩子中访问异步存储的数据。

假设我们有一个基于Vuex的状态管理，其中存储了用户的登录状态。我们需要在用户访问某些页面之前验证用户是否已登录，如果没有登录，我们将重定向用户到登录页面。

首先，确保你已经设置了Vuex和Vue Router在你的项目中。

1. **设置Vuex Store**
   ```javascript
   import Vue from 'vue';
   import Vuex from 'vuex';

   Vue.use(Vuex);

   export default new Vuex.Store({
     state: {
       isLoggedIn: false
     },
     mutations: {
       setLoggedIn(state, status) {
         state.isLoggedIn = status;
       }
     },
     actions: {
       checkLoginStatus({ commit }) {
         return new Promise((resolve) => {
           // 模拟异步请求
           setTimeout(() => {
             const loggedIn = true; // 假设用户已登录
             commit('setLoggedIn', loggedIn);
             resolve(loggedIn);
           }, 1000);
         });
       }
     }
   });
   ```

2. **配置Vue Router**
   ```javascript
   import Vue from 'vue';
   import Router from 'vue-router';
   import store from './store'; // 引入store

   Vue.use(Router);

   const router = new Router({
     routes: [
       {
         path: '/secret',
         name: 'SecretPage',
         component: () => import('./components/SecretPage.vue'),
         beforeEnter: (to, from, next) => {
           store.dispatch('checkLoginStatus').then(isLoggedIn => {
             if (!isLoggedIn) {
               next('/login'); // 重定向到登录页面
             } else {
               next(); // 继续导航到目标路由
             }
           });
         }
       },
       {
         path: '/login',
         name: 'LoginPage',
         component: () => import('./components/LoginPage.vue')
       }
     ]
   });

   export default router;
   ```

在这个例子中：

- 我们在Vuex Store中定义了一个`isLoggedIn`状态，表示用户是否已登录，并提供一个异步的`checkLoginStatus` action来模拟异步检查登录状态。
- 在Vue Router的配置中，我们为需要保护的路由（如`/secret`）添加了一个`beforeEnter`钩子。在这个钩子内部，我们调用了`checkLoginStatus` action，并根据返回的登录状态决定是继续进入目标路由还是重定向到登录页面。

通过这种方式，我们可以确保用户在访问需要权限的页面前已经完成了登录状态的验证。这种模式对于任何需要在进入路由前处理异步数据的场景都非常有用。

如何在 vue-router 中访问异步存储数据，以便在 beforeEnter 钩子中使用？

在VueJS中使用枚举（或常量）主要有两种方式，这可以增加代码的可读性和维护性。我将分别介绍这两种方法并提供示例：

### 方法一：使用对象作为常量

你可以在Vue组件或单独的JS文件中定义一个常量对象。这种方法适用于项目中需要重用的值，比如状态码、配置选项等。

**示例：**

假设我们在一个单独的文件（例如`constants.js`）中定义一些常用的用户角色：

```javascript
export const USER_ROLES = {
  ADMIN: 'admin',
  EDITOR: 'editor',
  VIEWER: 'viewer'
};
```

然后，在Vue组件中引入并使用这些常量：

```javascript
import { USER_ROLES } from './constants';

export default {
  data() {
    return {
      currentUserRole: USER_ROLES.EDITOR
    };
  },
  methods: {
    checkRole() {
      if (this.currentUserRole === USER_ROLES.ADMIN) {
        console.log('当前用户是管理员。');
      }
    }
  }
}
```

### 方法二：使用TypeScript的枚举

如果你的Vue项目中使用了TypeScript，可以利用TypeScript提供的枚举类型来定义一组命名常量。

**示例：**

首先定义一个枚举：

```typescript
// roles.ts
export enum UserRole {
  Admin = 'admin',
  Editor = 'editor',
  Viewer = 'viewer'
}
```

在Vue组件中引入并使用这个枚举：

```typescript
import { UserRole } from './roles';

export default {
  data() {
    return {
      currentUserRole: UserRole.Editor
    };
  },
  methods: {
    checkRole() {
      if (this.currentUserRole === UserRole.Admin) {
        console.log('当前用户是管理员。');
      }
    }
  }
}
```

### 总结

以上两种方法都是在VueJS中使用枚举和常量的有效方式。选择哪一种方法取决于你的项目需求以及是否使用TypeScript。使用枚举和常量可以帮助我们减少代码中硬编码的字符串，使代码更加清晰、易于维护。

如何在 VueJS 中使用枚举（或常量）？

在 Web 开发中，Vue Router 主要用于单页面应用（SPA）中管理页面间的导航。通常情况下，Vue Router 处理的是在同一个浏览器标签中的视图切换，而不是打开新的浏览器标签。

然而，如果你想在新标签中打开一个链接，这通常不是 Vue Router 直接处理的，但可以通过传统的 HTML 方式来实现。例如，你可以在 Vue 组件中使用普通的 `<a>` 标签，并设置 `target="_blank"` 属性来在新标签中打开链接。这种方法并不依赖于 Vue Router，而是浏览器的标准行为。

```html
<template>
  <div>
    
    <a href="https://example.com" target="_blank">Visit Example.com</a>
  </div>
</template>
```

这种方法适用于那些需要从你的 Vue 应用中链接到外部页面或者完全不同的路由上下文的场景。对于 SPA 内部的路由，通常不建议在新的标签页中打开，因为这违背了单页面应用的设计初衷，即在一个单一的页面加载所有内容，通过 AJAX 来与服务器交互，从而避免页面的重新加载。

总结来说，虽然 Vue Router 本身不支持在新标签页中打开链接，但你可以使用传统的 HTML 方法来实现这一需求。这样做既简单又有效，且能够适用于需要从 SPA 跳转到其他网站或应用的场景。

Vue router 可以在新标签中打开链接吗？

### 1. 请简述你对Moment.js的了解。

Moment.js 是一个功能强大的JavaScript日期库，用于解析、验证、操作和格式化日期。自2011年以来，Moment.js一直是处理日期和时间的首选库。它提供了丰富的API，可以方便地显示、查询和计算日期和时间。

### 2. 你能给出在Vue.js项目中使用Moment.js的场景吗？

在Vue.js项目中，Moment.js尤其有用于处理和显示日期和时间。这种情况通常出现在：

- **用户界面显示**：当需要在用户界面上以特定格式显示日期和时间时，Moment.js提供了多种格式化选项。
- **日期计算**：如果需要计算时间差或将时间向前/向后推移，Moment.js提供了简单的方法来进行日期数学运算。
- **表单验证**：在输入或提交表单时，使用Moment.js来验证日期字段是否符合特定条件。

### 3. 请提供一个具体的例子，说明如何在Vue.js项目中集成和使用Moment.js。

假设我们正在开发一个Vue.js应用程序，需要用户输入一个日期，并显示这个日期的一周后的日期。以下是如何使用Moment.js来实现的步骤：

**步骤 1**：安装Moment.js

```bash
npm install moment
```

**步骤 2**：在Vue组件中引入和使用Moment.js

```javascript
<template>
  <div>
    <input v-model="userDate" type="date" placeholder="Enter a date">
    <button @click="calculateFutureDate">显示一周后的日期</button>
    <p>一周后的日期是: {{ futureDate }}</p>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      userDate: '',
      futureDate: ''
    };
  },
  methods: {
    calculateFutureDate() {
      if (this.userDate) {
        this.futureDate = moment(this.userDate).add(7, 'days').format('YYYY-MM-DD');
      }
    }
  }
}
</script>
```

**步骤 3**：运行应用并测试功能

用户可以在输入框中选择一个日期，点击按钮后，组件将计算日期的一周后日期，并显示在界面上。

### 4. Moment.js 有哪些替代品，你是否考虑过使用它们？为什么？

虽然Moment.js是非常流行和强大的，但它也有一些已知的缺点，例如文件大小较大，以及不再积极维护（Moment.js团队已经在其官方网站上建议考虑使用其他库）。

替代品包括：

- **Day.js**：与Moment.js API非常相似，但体积更小，且被积极维护。
- **date-fns**：提供了许多模块化的日期功能，允许开发者只引入需要的部分，从而减少最终应用的体积。
- **Luxon**：由Moment.js的开发者之一创建，设计用来解决Moment.js的一些问题，如不变性和国际化。

在新项目中，我可能会考虑使用Day.js或date-fns，因为它们更现代，体积更小，更适合在现代Web应用中使用。

Vuejs 项目中如何使用 Moment. Js

在Vue.js中获取URL查询参数可以通过几种方式实现，具体取决于您的项目配置和您选择使用的路由管理库。以下是使用Vue.js和Vue Router的一些常见方法：

### 1. 使用 Vue Router 的 `$route.query`

假设您已经在项目中集成了Vue Router，您可以使用`$route.query`来访问URL中的查询参数。这个对象包含了当前路由的所有查询参数，其中每个字段的键是查询参数的名字，值是对应的值。

**示例代码：**

```javascript
export default {
  name: "MyComponent",
  mounted() {
    // 假设 URL 是： http://example.com/?name=John&age=30
    const name = this.$route.query.name; // John
    const age = this.$route.query.age; // 30
    console.log(`Name: ${name}, Age: ${age}`);
  }
}
```

这种方法的好处是可以非常直观地获取和监视URL查询参数的变化。

### 2. 在没有 Vue Router 的情况下使用原生 JavaScript

如果您的项目没有使用Vue Router，您可以使用原生JavaScript的`URLSearchParams`对象来获取查询参数。

**示例代码：**

```javascript
export default {
  name: "MyComponent",
  mounted() {
    const params = new URLSearchParams(window.location.search);
    const name = params.get('name'); // John
    const age = params.get('age'); // 30
    console.log(`Name: ${name}, Age: ${age}`);
  }
}
```

这种方法适用于不使用Vue Router但仍需要访问URL查询参数的简单场景。

### 3. 监听路由变化

如果您需要在查询参数变化时进行响应，可以在Vue组件中监听`$route`对象的变化。

**示例代码：**

```javascript
export default {
  name: "MyComponent",
  watch: {
    '$route'(to, from) {
      // 只关注查询参数的变化
      if (to.query !== from.query) {
        console.log('Query parameters changed:', to.query);
      }
    }
  }
}
```

这可以帮助您处理更复杂的场景，比如查询参数变化时需要重新加载数据或执行其他动作。

### 总结

根据您的项目具体使用的技术栈（是否使用Vue Router等），可以选择适合的方法来获取URL中的查询参数。使用Vue Router的`$route.query`通常是最直接和易于管理的方式，但使用原生JavaScript也是一种不错的替代方案，尤其是在简单的应用中或者不使用Vue Router的情况下。

VueJs 获取 url 查询

在 Vue Composition API 中使用 Axios 发起请求通常涉及到几个步骤：安装 Axios，设置响应式数据，创建一个请求函数，并在合适的生命周期钩子中调用这个函数。

下面是一个具体的例子，展示了如何在 Vue Composition API 中使用 Axios 发起一个 GET 请求：

首先，确保你已经安装了 Axios。如果还没有安装，可以使用 npm 或 yarn 来进行安装：

```sh
npm install axios
# 或者
yarn add axios
```

然后，可以在 Vue 组件中使用 `setup` 函数来定义响应式数据和方法。这里是一个示例代码：

```javascript
<template>
  <div>
    <div v-if="error">请求失败：{{ error }}</div>
    <div v-else-if="data">
      
      <div>{{ data.title }}</div>
    </div>
    <div v-else>加载中...</div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const data = ref(null); // 用于存放请求结果的响应式数据
    const error = ref(null); // 用于存放可能出现的错误信息
    const loading = ref(false); // 用于表示请求是否正在进行中

    // 定义请求函数
    const fetchData = async () => {
      loading.value = true;
      error.value = null; // 每次请求前重置错误信息
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
        data.value = response.data; // 如果请求成功，更新 data
      } catch (e) {
        error.value = e.message; // 如果请求失败，更新 error
      } finally {
        loading.value = false; // 无论成功还是失败，请求结束后更新 loading 状态
      }
    };

    // 在组件挂载后立即发起请求
    onMounted(() => {
      fetchData();
    });

    // 返回响应式数据，供模板访问
    return {
      data,
      error,
      loading
    };
  }
};
</script>
```

在上面的示例中，我们首先定义了三个响应式变量：`data` 用于存储请求到的数据，`error` 用于存储可能发生的错误信息，`loading` 用于表示请求是否正在进行。然后定义了一个名为 `fetchData` 的异步函数，负责使用 Axios 发起 GET 请求。在 `onMounted` 生命周期钩子中调用此函数以确保组件挂载后立即发起数据请求。最后，我们将响应式变量通过 `setup` 函数的返回值暴露给模板，以便在模板中进行数据绑定和显示状态信息。

以上就是在 Vue Composition API 中使用 Axios 发起请求的基本流程和示例。

Vue Composition API 中如何使用 Axios 发起请求？

在Vue.js中，子组件更新父组件的数据通常是通过自定义事件来实现的。这种方式确保了数据的单向流动，符合Vue的设计原则，即数据从父组件流向子组件（通过props），而事件从子组件流向父组件。

### 步骤说明：

1. **定义父组件**：在父组件中定义需要被子组件更新的数据。

2. **传递事件处理函数**：在父组件中定义一个方法，这个方法将被用于更新数据。

3. **在子组件中触发事件**：使用 `$emit` 方法在子组件中触发一个事件，可以选择传递需要的数据作为参数。

4. **监听子组件事件**：在父组件中使用子组件的标签上添加对该事件的监听，并指定处理该事件的方法。

### 示例：

假设我们有一个父组件 `ParentComponent` 和一个子组件 `ChildComponent`。我们想从 `ChildComponent` 中更新 `ParentComponent` 的 `parentData` 数据。

#### 父组件代码（ParentComponent.vue）:

```vue
<template>
  <div>
    <child-component @update-parent="updateData" />
    <p>父组件的数据：{{ parentData }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: '初始数据'
    };
  },
  methods: {
    updateData(newData) {
      this.parentData = newData;
    }
  }
}
</script>
```

#### 子组件代码（ChildComponent.vue）:

```vue
<template>
  <button @click="updateParentData">更新父组件数据</button>
</template>

<script>
export default {
  methods: {
    updateParentData() {
      this.$emit('update-parent', '更新后的数据');
    }
  }
}
</script>
```

在这个例子中，当在 `ChildComponent` 中点击按钮时，会触发 `updateParentData` 方法。此方法通过 `this.$emit` 发出名为 `update-parent` 的事件，并传递了新的数据（'更新后的数据'）。父组件 `ParentComponent` 监听到这个事件后，会调用 `updateData` 方法，用传递的数据更新 `parentData`。

这种模式保持了组件之间的独立性和可复用性，同时使得数据更新的流动清晰可追踪。

Vuejs 从子组件更新父数据

在Vue Router中，我们可以通过在路由路径中添加一个问号`?`来标记参数为可选。这意味着此参数不是必须的，用户可以在没有此参数的情况下访问该路由，也可以提供此参数来访问相同的路由但获得稍微不同的结果或数据。

### 创建带有可选参数的路由

假设我们有一个Vue应用程序，其中包含一个用户个人资料页，用户ID是可选的。如果提供了用户ID，我们将显示该特定用户的资料；如果没有提供，则显示当前登录用户的资料。在Vue Router的配置中，我们可以如下设置路由：

```javascript
const router = new VueRouter({
  routes: [
    {
      path: '/profile/:userId?',
      component: UserProfile
    }
  ]
})
```

在上面的路由定义中，`:userId` 是一个动态参数，`?` 表明这个参数是可选的。这意味着 `/profile` 和 `/profile/123` 都是有效的路由，都会导向 `UserProfile` 组件。

### 在组件中使用可选参数

在 `UserProfile` 组件中，我们可以通过 `this.$route.params.userId` 来访问 `userId` 参数。根据 `userId` 的有无，我们可以决定加载当前登录用户的资料还是特定用户的资料。

例如：

```javascript
export default {
  data() {
    return {
      userProfile: null
    }
  },
  created() {
    this.fetchUserProfile();
  },
  methods: {
    fetchUserProfile() {
      const userId = this.$route.params.userId || '当前用户ID';

      // 假设有一个 fetchUser 函数负责发送API请求
      fetchUser(userId).then(data => {
        this.userProfile = data;
      });
    }
  }
}
```

### 总结

通过在Vue Router中使用可选参数，我们可以创建更灵活的路由策略，同时利用同一个组件来处理多种类似的情况，从而简化项目的结构和提高代码复用性。在实际开发中，这种技巧非常有用，特别是在需要根据URL的变化显示不同数据时。

如何在 Vue Router 中创建和使用可选参数？

在Vue组件中将外部JavaScript脚本添加到组件中通常有以下几种方式：

### 1. 使用`<script>`标签在`index.html`中直接引入

在Vue项目的入口文件`index.html`中，可以直接在`<head>`标签或者`<body>`标签的底部添加`<script>`标签来引入外部脚本。

```html

<script src="https://example.com/some-external-script.js"></script>
```

这种方式的好处是全局只加载一次，所有组件都可以访问到该脚本提供的功能，但缺点是不论组件是否需要该脚本，它都会被加载。

### 2. 动态加载使用`import()`

可以在组件内使用JavaScript的动态导入（`import()`），这样可以在需要的时候才加载和解析脚本，还支持模块化的代码。

```javascript
// Vue组件内
export default {
  name: 'MyComponent',
  mounted() {
    import('path-to-external-script')
      .then(module => {
        // 使用加载的脚本
        module.someFunction();
      })
      .catch(err => {
        console.error('Failed to load the external script', err);
      });
  }
};
```

使用动态导入可以更好地控制脚本加载的时机，实现按需加载，优化性能。

### 3. 使用第三方库

有时外部脚本可能是一个第三方库，可以通过npm或yarn这样的包管理器来安装，并在组件中以模块的方式导入。

```bash
npm install some-external-library
# 或者
yarn add some-external-library
```

然后在Vue组件中导入使用：

```javascript
// Vue组件内
import someLibrary from 'some-external-library';

export default {
  name: 'MyComponent',
  mounted() {
    someLibrary.someFunction();
  }
};
```

### 4. 使用Vue插件

如果外部脚本是一个Vue插件，可以在Vue实例创建之前使用`Vue.use()`来注册插件。

```javascript
import Vue from 'vue';
import SomePlugin from 'some-vue-plugin';

Vue.use(SomePlugin);

new Vue({
  // ... 配置项
});
```

注册插件后，通常可以在所有的Vue组件中使用该插件提供的功能。

### 5. 动态创建`<script>`标签

有时，你可能需要在组件的生命周期钩子中动态创建并添加`<script>`标签。

```javascript
export default {
  name: 'MyComponent',
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://example.com/some-external-script.js';
    script.onload = () => {
      // 脚本加载完成后执行的操作
    };
    document.body.appendChild(script);
  }
};
```

这种方法允许你在组件的生命周期内控制脚本的加载，但需要注意清理，防止内存泄露，如在组件销毁时移除创建的script标签。

### 总结

选择哪种方法取决于你的具体需求，如全局可用性、按需加载、依赖管理等。在实际开发中，推荐根据项目的结构和需求来合理安排资源的加载方式。

解决此问题的一个简单有效的方法是将外部脚本添加到`mounted()`组件的 vue 中。我将用[Google Recaptcha](https://www.google.com/recaptcha/intro/)脚本向您说明：

    <template>
       .... your HTML
    </template>
    
    <script>
      export default {
        data: () => ({
          ......data of your component
        }),
        mounted() {
          let recaptchaScript = document.createElement('script')
          recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
          document.head.appendChild(recaptchaScript)
        },
        methods: {
          ......methods of your component
        }
      }
    </script>
    

来源： https: [//medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8](https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8)

我下载了一些带有自定义 js 文件和 jquery 的 HTML 模板。我必须将这些 js 附加到我的应用程序中。并继续使用 Vue。

在这种情况下，这个包非常适合我 [https://www.npmjs.com/package/vue-plugin-load-script](https://www.npmjs.com/package/vue-plugin-load-script)

    // local files
    // you have to put your scripts into the public folder. 
    // that way webpack simply copy these files as it is.
    Vue.loadScript("/js/jquery-2.2.4.min.js")
    
    // cdn
    Vue.loadScript("https://maps.googleapis.com/maps/api/js")

使用 webpack 和 vue loader 你可以做这样的事情

它在创建组件之前等待外部脚本加载，因此 globar vars 等在组件中可用

    components: {
     SomeComponent: () => {
      return new Promise((resolve, reject) => {
       let script = document.createElement('script')
       script.onload = () => {
        resolve(import(someComponent))
       }
       script.async = true
       script.src = 'https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=places'
       document.head.appendChild(script)
      })
     }
    },

更新：这在 Vue 3 中不再有效。您将收到此错误：

> VueCompilerError：具有副作用（ 和 ）的标签在客户端组件模板中被忽略。

* * *

**如果您尝试将外部 js 脚本嵌入到 vue.js 组件模板中，请按照以下步骤操作：**

我想向我的组件添加**外部 JavaScript 嵌入代码，**如下所示：

    <template>
      <div>
        This is my component
        <script src="https://badge.dimensions.ai/badge.js"></script>
      </div>
    <template>
    

Vue 向我展示了这个错误：

> 模板应该只负责将状态映射到 UI。避免在模板中放置具有副作用的标签，例如 ，因为它们不会被解析。

* * *

**我解决这个问题的方法是添加`type="application/javascript"`**（[请参阅此问题以了解有关 js 的 MIME 类型的更多信息](https://stackoverflow.com/questions/189850/what-is-the-javascript-mime-type-for-the-type-attribute-of-a-script-tag)）：

`<script type="application/javascript" defer src="..."></script>`

* * *

_您可能会注意到该`defer`属性。如果您想了解更多信息，请观看[Kyle 的视频](https://www.youtube.com/watch?v=BMuFBYw91UQ)_

这可以简单地像这样完成。

      created() {
        var scripts = [
          "https://cloudfront.net/js/jquery-3.4.1.min.js",
          "js/local.js"
        ];
        scripts.forEach(script => {
          let tag = document.createElement("script");
          tag.setAttribute("src", script);
          document.head.appendChild(tag);
        });
      }

Vue 如何将外部 js 脚本添加到组件中？

在Vue中，如果想要通过`watch`监听Vuex中存储的值，你可以使用计算属性(computed properties)结合侦听器(watchers)来实现。Vuex的状态变化是响应式的，这意味着你可以简单地在计算属性中返回Vuex的状态，并在`watch`选项中侦听这个计算属性的变化。

以下是一个具体的例子：

假设你有一个Vuex store，里面存有一个状态叫做`count`。

```javascript
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});
```

你想要在Vue组件中监听`count`值的变化。你可以这样做：

```javascript
new Vue({
  el: '#app',
  store,
  computed: {
    // 使用计算属性来获取Vuex里的状态
    count() {
      return this.$store.state.count;
    }
  },
  watch: {
    // 使用侦听器来监听计算属性的变化
    count(newVal, oldVal) {
      console.log(`count值从${oldVal}变化到${newVal}`);
      // 这里可以根据count值的变化执行一些操作
    }
  }
});
```

在这个例子中，计算属性`count`用来从Vuex获取当前的`count`状态。然后，我们在组件的`watch`选项中定义了一个`count`侦听器，该侦听器将会在计算属性`count`的值变化时触发。这样，每当通过Vuex的mutation改变`count`状态时，计算属性会自动更新，进而触发侦听器中的回调函数。

此外，如果你想要深度监听一个对象的属性变化，可以在`watch`选项中设置`deep: true`，但对于大多数监听单一值的场景，如上述的`count`，这是不必要的。

举例来说，您有一篮子水果，每次从篮子中添加或删除水果时，您希望 (1) 显示有关水果数量的信息，**但**您还 (2) 希望收到以下通知以某种奇特的方式计算水果的数量......

_水果计数组件.vue_

    <template>
      
      
      <p>Fruits: {{ count }}</p>
    </template>
    
    <script>
    import basket from '../resources/fruit-basket'
    
    export default () {
      computed: {
        count () {
          return basket.state.fruits.length
          // Or return basket.getters.fruitsCount
          // (depends on your design decisions).
        }
      },
      watch: {
        count (newCount, oldCount) {
          // Our fancy notification (2).
          console.log(`We have ${newCount} fruits now, yay!`)
        }
      }
    }
    </script>
    

请注意，对象中函数的名称`watch`必须与对象中函数的名称匹配`computed`。在上面的示例中，名称是`count`。

监视属性的新值和旧值将作为参数传递给监视回调（计数函数）。

篮子店可能看起来像这样：

_水果篮.js_

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const basket = new Vuex.Store({
      state: {
        fruits: []
      },
      getters: {
        fruitsCount (state) {
          return state.fruits.length
        }
      }
      // Obviously you would need some mutations and actions,
      // but to make example cleaner I'll skip this part.
    })
    
    export default basket
    

您可以在以下资源中阅读更多内容：

*   [计算属性和观察者](https://v2.vuejs.org/v2/guide/computed.html)
*   [API 文档：计算的](https://v2.vuejs.org/v2/api/#computed)
*   [API 文档：观看](https://v2.vuejs.org/v2/api/#watch)

很简单：

    watch: {
      '$store.state.drawer': function() {
        console.log(this.$store.state.drawer)
      }
    }
    

如果商店位于模块中，请使用：

    '$store.state.myModule.drawer'
    

对于嵌套文件，请使用：

    '$store.state.fileOne.fileTwo.myModule.drawer'

您不应该使用组件的观察者来监听状态更改。我建议您使用 getters 函数，然后将它们映射到您的组件中。

    import { mapGetters } from 'vuex'
    
    export default {
      computed: {
        ...mapGetters({
          myState: 'getMyState'
        })
      }
    }
    

在您的商店中：

    const getters = {
      getMyState: state => state.my_state
    }
    

您应该能够通过`this.myState`在组件中使用来监听对商店所做的任何更改。

[https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper](https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper)

**如上所述，直接在商店中查看变化并不是一个好主意**

_但在一些非常罕见的情况下，它可能对某人有用，所以我会留下这个答案。其他情况请参阅@gabriel-robert 的回答_

您可以通过`state.$watch`. 将其添加到`created`组件中的（或需要执行此操作的位置）方法中

    this.$store.watch(
        function (state) {
            return state.my_state;
        },
        function () {
            //do something on data change
        },
        {
            deep: true //add this if u need to watch object properties change etc.
        }
    );
    

更多详细信息： https: [//vuex.vuejs.org/api/#watch](https://vuex.vuejs.org/api/#watch)

我认为提问者想将 watch 与 Vuex 一起使用。

    this.$store.watch(
          (state)=>{
            return this.$store.getters.your_getter
          },
          (val)=>{
           //something changed do something
    
          },
          {
            deep:true
          }
          );

如何从 vuex 查看商店价值

在Vue.js中，实现页面重定向通常涉及使用Vue Router，它是Vue.js的官方路由管理器。Vue Router允许你定义页面路由、导航、嵌套路由等。下面是几种在Vue应用中实现页面重定向的方法：

### 1. 在路由配置中使用 `redirect`

在Vue Router的路由配置中，你可以指定一个路由规则以`redirect`字段来重定向到另一个路由。

```javascript
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
    // 当用户访问/a时，页面会重定向到/b
  ]
})
```

### 2. 在组件内使用编程式导航

你可以在Vue组件的方法中使用路由实例的`push`或`replace`方法来实现页面导航。

```javascript
this.$router.push('/target-page'); // 将用户导航到目标页面，相当于点了一个链接
// 或者
this.$router.replace('/target-page'); // 替换当前的历史记录条目
```

### 3. 使用导航守卫进行重定向

Vue Router提供了全局和路由独享的导航守卫，你可以在这些守卫中进行重定向。

```javascript
router.beforeEach((to, from, next) => {
  if (to.path === '/a') {
    next('/b'); // 如果用户要访问/a，那么重定向到/b
  } else {
    next(); // 否则，正常导航
  }
});
```

### 4. 使用`<router-link>`进行声明式导航

虽然`<router-link>`主要是用于声明式导航的，也可以用来触发重定向。

```html
<router-link to="/target-page">Go to Target Page</router-link>
```

设置了重定向的路由规则后，点击这个链接将会让应用导航到`/target-page`。

### 示例

假设你有一个登录页面，用户登录成功后需要重定向到首页。你可以在登录方法中使用编程式导航来实现：

```javascript
// Login.vue
export default {
  methods: {
    login() {
      // 登录逻辑...
      if (/* 登录成功 */) {
        this.$router.push('/home'); // 重定向到首页
      }
    }
  }
}
```

重定向是单页应用中常用的功能，Vue Router 提供了灵活的方式来实现不同场景下的页面跳转。在实际应用中，你可能需要结合实际的业务逻辑来选择最合适的重定向方式。

如果您使用的是[Vue Router](https://router.vuejs.org/)，则可以用于`router.push(path)`以编程方式导航到任何特定路线（请注意，这是`router.go(path)`Vue 2 之前的版本）。

`$router`可以从Vue 实例上的属性访问路由器本身，这意味着您可以`push`使用`this.$router.push(path)`.

您还可以使用对象语法进行更多控制，包括导航到预配置的[命名路由](https://router.vuejs.org/guide/essentials/named-routes.html)。从[文档](https://router.vuejs.org/guide/essentials/navigation.html#navigate-to-a-different-location)中：

>     // object
>     router.push({ path: 'home' })
>     
>     // named route
>     router.push({ name: 'user', params: { userId: '123' } })
>     
>     // with query, resulting in /register?plan=private
>     router.push({ path: 'register', query: { plan: 'private' } })
>     
>     // with hash, resulting in /about#team
>     router.push({ path: '/about', hash: '#team' })
>     

除了 Vue 路由器之外，`window.location.href = 'some url';`它也适用于非单页应用程序。

* * *

如果您正在寻找更永久的_重定向_，而不仅仅是编程导航，例如将所有`example.com/foo`点击重定向到`example.com/bar`，那么您应该使用[Vue Router 的重定向或别名功能](https://router.vuejs.org/guide/essentials/redirect-and-alias.html)。

### 重定向

[重定向](https://router.vuejs.org/guide/essentials/redirect-and-alias.html#redirect)位于路由配置中，让你告诉 Vue Router 始终将给定路径重定向到其他地方，例如导航到`/foo`会将你弹回`/bar`：

    const routes = [{ path: '/foo', redirect: '/bar' }];
    

这些路径也可以是动态的，例如：

    const routes = [{ path: '/foo/:subPath*', redirect: '/bar/:subPath*' }];
    // example.com/foo/profile?id=123 --> example.com/bar/profile?id=123
    

### 别名

[别名](https://router.vuejs.org/guide/essentials/redirect-and-alias.html#alias)就像重定向一样，将流量从一个位置路由到另一个位置，**但它们不会更改用户的 URL**。这允许您将 UI 结构的任意部分映射到您想要的任何路径，从而提供更大的灵活性。

从文档中：

>     const routes = [
>       {
>         path: '/users',
>         component: UsersLayout,
>         children: [
>           // this will render the UserList component for these 3 URLs:
>           // - /users
>           // - /users/list
>           // - /people
>           { path: '', component: UserList, alias: ['/people', 'list'] },
>         ],
>       },
>     ]
>

根据文档，router.push 似乎是首选方法：

> 要导航到不同的 URL，请使用 router.push。此方法将新条目推送到历史堆栈中，因此当用户单击浏览器后退按钮时，他们将被带到上一个 URL。

来源： https: [//router.vuejs.org/en/essentials/navigation.html](https://router.vuejs.org/en/essentials/navigation.html)

仅供参考：Webpack 和组件设置，单页应用程序（通过 Main.js 导入路由器），我必须通过以下方式调用路由器函数：

    this.$router
    

示例：如果您想在满足条件后重定向到名为“Home”的路线：

    this.$router.push('Home')

当在组件脚本标签内时，您可以使用路由器并执行类似的操作

    this.$router.push('/url-path')

如果你想路由到另一个页面使用这个

    this.$router.push({path: '/pagename'});
    

如果你想使用参数路由到另一个页面，请使用这个

    this.$router.push({
      path: '/pagename', 
      params: {
        param1: 'value1', 
        param2: 'value2'
      }
    });

Vue.js 如何实现页面重定向到另一个页面？

在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`，您可以用它做任何您想做的事情（例如设置观察者等）

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

Vue.js 通常是响应式的，当对应的数据变化时，Vue 会自动更新 DOM。然而，在某些情况下，你可能需要强制 Vue 组件重新渲染，即便其数据没有发生变化。以下是几种可以实现强制重新渲染的方法：

### 1. 使用 `key` 属性

在 Vue 中，你可以通过改变一个组件的 `key` 属性来强制其重新渲染。`key` 属性是 Vue 的一个特殊属性，用于跟踪节点的身份，这可以用于强制重新渲染组件。

```vue
<template>
  <your-component :key="componentKey"></your-component>
</template>

<script>
export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    reloadComponent() {
      this.componentKey += 1;
    }
  }
};
</script>
```

在上述例子中，每当你调用 `reloadComponent` 方法时，`componentKey` 的值都会增加，这将会导致 `your-component` 重新创建和渲染。

### 2. 使用 `v-if` 指令

另一种方法是利用 `v-if` 指令来控制组件的渲染。你可以在一个变量上切换 `v-if` 的值，使组件先销毁，然后再重新创建。

```vue
<template>
  <your-component v-if="isComponentVisible"></your-component>
</template>

<script>
export default {
  data() {
    return {
      isComponentVisible: true,
    };
  },
  methods: {
    reloadComponent() {
      this.isComponentVisible = false;
      this.$nextTick(() => {
        this.isComponentVisible = true;
      });
    }
  }
};
</script>
```

在这个例子中，`reloadComponent` 方法首先将 `isComponentVisible` 设置为 `false`，这会导致组件被销毁。然后，使用 `$nextTick` 方法等待 Vue 完成 DOM 更新，在回调函数中将 `isComponentVisible` 设置回 `true`，重新渲染组件。

### 3. 使用 `forceUpdate`

虽然不是最推荐的方法，因为它违背了 Vue 的响应式原则，但你也可以使用 Vue 实例的 `forceUpdate` 方法来强制更新视图。

```javascript
this.$forceUpdate();
```

这将会导致组件内的所有子组件也会进行重新渲染。需要注意的是，过度使用 `$forceUpdate` 可能会导致性能问题，因为它绕过了 Vue 的响应式系统。

总之，通常建议尽量避免强制重新渲染组件，而是寻找更符合 Vue 响应式原理的解决办法。只有在特定情况下，当其他方法行不通时，才使用上述提到的方法。

试试这个魔法咒语：

    vm.$forceUpdate();
    //or in file components
    this.$forceUpdate();
    

无需创建任何悬挂变量:)

**更新：**当我刚开始使用 VueJS 时，我发现了这个解决方案。然而，进一步的探索证明这种方法是一种拐杖。据我记得，有一段时间我摆脱了它，只是将所有无法自动刷新的属性（主要是嵌套属性）放入计算属性中。

更多信息请参见：[https ://v2.vuejs.org/v2/guide/compulated.html](https://v2.vuejs.org/v2/guide/computed.html)

这似乎是[matthiasg](https://github.com/matthiasg)关于[这个问题](https://github.com/vuejs/Discussion/issues/356)的一个非常干净的解决方案：

> `:key="someVariableUnderYourControl"`当您想要完全重建组件时，您还可以使用和更改密钥

对于我的用例，我将 Vuex getter 作为 prop 提供给组件。Vuex 会以某种方式获取数据，但反应性不会可靠地启动以重新渲染组件。就我而言，将组件设置`key`为 prop 上的某个属性可以保证在 getter（和属性）最终解析时刷新。

请阅读此 [http://michaelnthiessen.com/force-re-render/](http://michaelnthiessen.com/force-re-render/)

> 可怕的方法：重新加载整个页面  
> 可怕的方法：使用 v-if hack  
> 更好的方法：**使用 Vue 的内置 forceUpdate 方法**  
> 最好的方法：**在组件上更改键**  

    <template>
       <component-to-re-render :key="componentKey" />
    </template>
    
    <script>
     export default {
      data() {
        return {
          componentKey: 0,
        };
      },
      methods: {
        forceRerender() {
          this.componentKey += 1;  
        }
      }
     }
    </script>
    

在某些情况下我也使用 watch: 。

尝试使用`this.$router.go(0);`手动重新加载当前页面。

Vue .js 如何强制重新加载/重新渲染？

`v-model` 和 `v-bind` 是 Vue 中的两个指令，它们在功能上有所不同：

### `v-model`

`v-model` 是 Vue 的一个指令，用于在表单输入元素和应用状态之间创建双向数据绑定。这意味着，当您在输入框中输入内容时，绑定的数据会自动更新；同样，当更新了绑定的数据时，输入框内的内容也会自动更新。

**用途**：通常用于表单控件如 `<input>`, `<select>`, `<textarea>` 等。

**示例**：

```html
<template>
  <input v-model="message" placeholder="输入一些文字">
  <p>输入的消息是： {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>
```

在这个例子中，`v-model` 将 input 的值和 data 中的 `message` 属性进行了双向绑定。当用户在输入框中键入时，`message` 属性的值会更新；同样，如果通过其他方式更改了 `message` 的值，输入框也会显示最新的内容。

### `v-bind`

`v-bind` 是 Vue 的一个指令，用于单向绑定父组件的数据到子组件的属性上。它通常用来动态设置 HTML 元素的属性或子组件的 prop。

**用途**：在处理任何 HTML 属性或组件 prop 的单向绑定时使用。

**示例**：

```html
<template>
  <div>
    <img v-bind:src="imageSrc" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'path/to/image.jpg'
    };
  }
};
</script>
```

在这个例子中，`v-bind` 将 img 标签的 src 属性绑定到 Vue 实例的 data 中的 `imageSrc` 属性上。当 `imageSrc` 的值发生变化时，img 的 src 属性会自动更新以反映这一变化。但这种绑定是单向的，即 img 的变化不会影响到 `imageSrc` 的值。

### 区别总结

- **数据流向**：`v-model` 是双向绑定，而 `v-bind` 是单向绑定。
- **用途**：`v-model` 主要用于表单元素，而 `v-bind` 适用于绑定 HTML 属性和组件的 props。
- **语法简洁性**：`v-model` 直接写在指令上，而 `v-bind` 后通常需要指定具体的属性，例如 `v-bind:src`、`v-bind:class` 等。在简写形式中，`v-bind` 可以直接使用冒号(`:`)，如 `:src="imageSrc"`。

理解这两个指令的不同用途和工作方式对于有效地使用 Vue 来构建交互式界面是非常重要的。

Vue相关问题