作为一种流行的前端框架，vue.js（简称vue）给开发者提供了一些灵活的路由管理工具，方便我们在单页面应用中进行页面切换和控制。
但是，有时我们需要在路由地址的变化中做出一些响应，比如我们想根据地址中的参数来渲染不同的内容，或者根据不同的路由显示不同的导航栏。
那么，如何在Vue中实现对地址栏变化的监听呢？本文将介绍两种方法：
1. 使用Vue-Router的路由守卫
Vue-Router是Vue.js官方提供的用于管理SPA（Single-Page Application）路由的插件。通过Vue-Router，我们可以方便地进行跨组件的路由控制。
Vue-Router提供了路由守卫（[navigation guards](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html)）功能，它是Vue-Router最有用的功能之一。路由守卫是一个函数，用于控制路由的导航行为。
立即学习“前端免费学习笔记（深入）”；
在路由守卫中，我们可以使用beforeEach函数来监听路由变化。每当路由变化时，该函数会被调用，并传入三个参数to、from和next。
to是要跳转到的目标路由，from是当前所在的路由，next是一个函数，用于控制下一步该怎么走。当我们调用next函数时，路由才会继续进行跳转。
举个例子，假设我们要监听路由的变化，并根据路由参数id渲染不同的文本内容：
// 路由定义
const router = new VueRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/post/:id',
component: Post
}
]
})
// Post组件定义
<template>
<div>
{{ postContent }}
</div>
</template>
<script>
export default {
data() {
return {
postContent: ''
}
},
mounted() {
this.fetchPostContent()
},
methods: {
async fetchPostContent() {
const id = this.$route.params.id // 从路由参数中获取id
this.postContent = await fetch('/api/posts/' + id).then(response => response.json())
}
}
}
</script>
// 路由守卫监听
router.beforeEach((to, from, next) => {
const id = to.params.id
if (id !== undefined) { // 如果传入id参数，则修改文本内容
next()
} else { // 否则不进行跳转
next(false)
}
})在路由守卫中，我们通过to.params.id获取路由参数id，并判断是否存在。如果存在，则继续跳转，否则不进行跳转。
这样，当我们在地址栏中输入/post/1时，Post组件会去获取id为1的博客文章内容，并渲染到页面上。当我们在地址栏中输入/post/时，不会进行跳转。
使用Vue-Router的路由守卫是一种简单、灵活的方法，可以很方便地监听地址栏的变化。
2. 使用Vue的watch属性
除了Vue-Router，Vue本身也提供了一种响应式的数据绑定机制。通过监听数据变化，我们可以在路由变化时做出一些响应。
Vue中的响应式机制是通过watch属性实现的。该属性用于监视Vue实例上的数据变化，并在数据发生变化时执行对应的回调函数。
我们可以通过监听路由参数的变化，并在参数变化时执行相应的操作。比如：
// Post组件定义
<template>
<div>
{{ postContent }}
</div>
</template>
<script>
export default {
data() {
return {
postContent: ''
}
},
watch: {
// 监听路由参数id的变化
'$route.params.id'(newId, oldId) {
this.fetchPostContent(newId)
}
},
mounted() {
this.fetchPostContent(this.$route.params.id)
},
methods: {
async fetchPostContent(id) {
this.postContent = await fetch('/api/posts/' + id).then(response => response.json())
}
}
}
</script>在这个例子中，我们通过监听$route.params.id的变化，当id发生变化时执行相应的回调函数fetchPostContent。在首次挂载时，我们也需要手动执行一次fetchPostContent函数，以获取初始的博客文章内容。
使用Vue的watch属性可以帮助我们监听路由参数的变化，实现对地址栏的控制。
总之，Vue提供了多种方法来控制单页面应用中的路由行为，开发者可以按照自己的需求选择适合自己的方式。
