如何获取网址所带参数 vue

在Vue.js中获取网址所带参数可以通过以下几种方法：1、使用Vue Router、2、使用原生JavaScript、3、使用第三方库。下面我们将详细展开其中的第一点，即使用Vue Router获取网址参数的方法。

一、使用VUE ROUTER

Vue Router是Vue.js的官方路由管理器，能够轻松实现SPA（单页应用）的路由跳转和参数获取。

1.1、安装Vue Router

首先，确保你已经安装了Vue Router。如果没有安装，可以通过以下命令进行安装：

npm install vue-router

1.2、配置Vue Router

在你的Vue项目中配置Vue Router。创建一个router.js文件，并添加以下代码：

import Vue from 'vue';
import Router from 'vue-router';
import HomeComponent from '@/components/HomeComponent';
import DetailComponent from '@/components/DetailComponent';
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: HomeComponent
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: DetailComponent
    }
  ]
});

1.3、在组件中获取参数

在需要获取参数的组件中，可以通过this.$route.params来访问参数。例如，在DetailComponent中：

export default {
  name: 'DetailComponent',
  created() {
    const id = this.$route.params.id;
    console.log(id); // 输出参数id
  }
};

1.4、传递参数

在需要跳转的地方传递参数，例如在HomeComponent中：

<template>
  <div>
    <router-link :to="{ name: 'Detail', params: { id: 123 }}">Go to Detail</router-link>
  </div>
</template>

通过以上步骤，便可以在Vue.js应用中使用Vue Router轻松获取网址所带参数。

二、使用原生JavaScript

在某些情况下，可能不需要使用Vue Router，只需要简单地获取当前网址中的参数。这时可以使用原生JavaScript来实现。

2.1、使用URLSearchParams

URLSearchParams是一个方便的接口，用于处理URL查询字符串。

export default {
  name: 'SomeComponent',
  created() {
    const params = new URLSearchParams(window.location.search);
    const id = params.get('id');
    console.log(id); // 输出参数id
  }
};

2.2、使用正则表达式

如果需要对URL进行更复杂的处理，可以使用正则表达式。

export default {
  name: 'SomeComponent',
  created() {
    const match = window.location.search.match(/id=([^&]*)/);
    const id = match && match[1];
    console.log(id); // 输出参数id
  }
};

三、使用第三方库

在某些情况下，使用第三方库可以让代码更加简洁和易读。常见的库有qs和query-string等。

3.1、使用qs库

首先，安装qs库：

npm install qs

然后在组件中使用：

import qs from 'qs';
export default {
  name: 'SomeComponent',
  created() {
    const params = qs.parse(window.location.search, { ignoreQueryPrefix: true });
    const id = params.id;
    console.log(id); // 输出参数id
  }
};

3.2、使用query-string库

首先，安装query-string库：

npm install query-string