我来说说vue获取地址栏参数的值。

小甜 • 2024年6月16日 15:47 • 网站搭建 • 阅读 1

在 Vue.js 中，获取地址栏参数的方法有很多种，这里我们介绍一种简单易用的方法，通过使用 Vue Router 的 `this.$route.query` 属性来获取地址栏中的参数。

我们需要在 Vue 项目中安装并配置 Vue Router，安装方法如下：

npm install vue-router

在项目的 `src` 目录下创建一个名为 `router` 的文件夹，并在其中创建一个名为 `index.js` 的文件，在 `index.js` 文件中，我们需要导入 Vue 和 Vue Router,并配置路由规则，以下是一个简单的示例：

import Vue from \'vue\';
import Router from \'vue-router\';
import Home from \'@/components/Home\';
import About from \'@/components/About\';

Vue.use(Router);

export default new Router({
  routes: [
    { path: \'/\', component: Home },
    { path: \'/about\', component: About },
  ],
});

在这个示例中，我们定义了两个路由规则：`/` 对应 `Home` 组件，`/about` 对应 `About` 组件，接下来，我们需要在 `main.js` 文件中引入并使用这个路由实例，以下是 `main.js` 文件的一个示例：

import Vue from \'vue\';
import App from \'./App.vue\';
import router from \'./router\';

new Vue({
  el: \'#app\',
  router,
  render: h => h(App),
});

现在我们已经完成了 Vue Router 的配置，接下来我们就可以在 Vue 组件中获取地址栏参数了，假设我们有一个名为 `Search` 的组件，它需要根据地址栏中的参数来显示不同的搜索结果，我们可以在 `Search.vue` 文件中使用如下代码来获取地址栏参数：

<template>
  <div>
    <input type="text" v-model="searchKeyword" @input="onInput" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: \'\',
    };
  },
  methods: {
    onInput() {
      const params = new URLSearchParams(window.location.search);
      const keyword = params.get(\'keyword\'); // 这里假设地址栏中的参数名为 \'keyword\'
      this.searchKeyword = keyword; // 将获取到的参数值赋给组件的 data 属性，以便在模板中使用
    },
  },
};
</script>

在这个示例中，我们在输入框中监听了 `input` 事件，当用户在输入框中输入内容时，我们会触发 `onInput` 方法，在这个方法中，我们使用 `URLSearchParams` API 从地址栏中解析出参数，并将参数值赋给组件的 `searchKeyword` data 属性，我们就可以在模板中使用这个属性来显示不同的搜索结果了。