面试题：如何知道路由地址发生变化了？

凡大来啦

已于 2023-04-15 18:34:15 修改

阅读量90

点赞数

文章标签： vue.js 前端 javascript

于 2023-04-15 18:31:54 首次发布

本文链接：https://blog.csdn.net/u011690675/article/details/130173543

版权

本文介绍了在Vue.js应用中如何监听路由变化，包括在App.vue中使用watch侦听$route变化，利用updated生命周期钩子，以及设置全局的导航守卫beforeEach进行路由控制。这些方法允许开发者在路由改变时执行相应的操作或逻辑。

摘要由CSDN通过智能技术生成

方法1：侦听器

# 写在 App.vue 里

export default {
  	watch: {
		# 侦听 路由信息对象/地址栏对象 的变化
    	'$route' (newV) {
      		console.log(newV.params)
    	}
  	}
}

方法2：updated 钩子函数

# 写在 App.vue 里

export default {
	# 使用 updated 钩子函数
	updated () {
    	console.log(this.$route.params)
  	}
}

方法3：导航守卫

# 写在 new VueRouter(...) 后面
# to 要去哪
# from 从哪来
# to 和 from 都是路由信息对象/地址栏信息对象
# next() 放行函数，等价于 this.$router.push() 
# next() 表示放行
# next('/路径') 强制拦截到指定路径去

router.beforeEach( (to, from, next) => {
    ...
})

End-------------