vue中如何监听url地址栏参数变化

当我们在使用 Vue.js 开发前端应用时，有可能需要监听浏览器地址栏的变化，根据参数的不同，来修改页面的显示逻辑，这就需要监听URL地址栏参数的变化。

当我们在使用 Vue.js 开发前端应用时，有可能需要监听浏览器地址栏的变化，根据参数的不同，来修改页面的显示逻辑，这就需要监听URL地址栏参数的变化。

在vue中监听URL地址栏参数变化的方法，可以使用Vue Router提供的$route对象。$route包含了当前路由信息，可以通过它来获取URL的地址栏参数信息。如果我们要监听该参数的变化，只需通过watch方法来监听$route的变化，即可实现。

具体实现步骤如下：

1. 安装 vue-router

首先，我们要在项目中安装vue-router。如果你还没有安装，请在终端中执行以下命令：

npm install vue-router

1. 引入 vue-router 并进行配置

在 Vue.js 项目中，我们需要在main.js中引入vue-router并进行初始化配置。具体操作如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    }
  ]
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在上述的代码中，我们初始化了一个 router 对象，并且给它设置了两个路由，一个是 /，一个是 /about。

1. 监听 $route 对象的变化

在 Vue 组件中，我们可以通过 watch 方法来监听 $route 对象的变化。具体实现如下：

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      message: ''
    }
  },
  watch: {
    '$route': function(to, from) {
      this.message = '当前URL地址栏参数为:' + this.$route.query.id
    }
  }
}
</script>

在上述代码中，我们定义了一个组件 Home，并在 watch 方法中监听了 $route 对象的变化。当 $route 对象变化时，会触发 watch 方法中的回调函数，我们就可以在回调函数中获取到 URL 地址栏中的参数，并赋值到组件的 message 属性中。

1. 在模板中使用 message

最后，在组件的模板中，我们可以通过 {{ message }} 来显示 URL 地址栏中参数的值。

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      message: ''
    }
  },
  watch: {
    '$route': function(to, from) {
      this.message = '当前URL地址栏参数为:' + this.$route.query.id
    }
  }
}
</script>

如果我们现在打开浏览器，访问 http://localhost:8080/?id=123，我们就可以在页面上看到以下内容：

当前URL地址栏参数为:123

示例2：

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
export default {
  name: 'About',
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.message = '当前URL地址栏参数为:' + this.$route.params.id
  },
  watch: {
    '$route': function(to, from) {
      this.message = '当前URL地址栏参数为:' + this.$route.params.id
    }
  }
}
</script>

在组件的 mounted() 方法中，我们给 message 属性赋了一个初始值，这样我们在页面初次加载时就能显示出参数的值。而在 watch 方法中，我们也监听了 $route 对象，并且在回调函数中更新了 message 属性。

我们就可以通过访问 http://localhost:8080/about/123 来验证效果了。