可以使用监听router.currentRoute.value
的值,,来监听路由的变化。
使用:
引入:
import { useRouter} from 'vue-router'
setup使用 :文章来源:https://www.toymoban.com/news/detail-522085.html
const router = useRouter()
// 监听当前路由
watch(
() => router.currentRoute.value,
(newValue: any) => {
console.log('newValue',newValue)
},
{ immediate: true }
)
控制台输出的值newValue
:
如果我们只需要监听当前路由name
的变化,就可以这么监听router.currentRoute.value.name
文章来源地址https://www.toymoban.com/news/detail-522085.html
const router = useRouter()
// 监听当前路由的name变化
watch(
() => router.currentRoute.value.name,
(newRouterName: any) => {
console.log('newRouterName',newRouterName)
},
{ immediate: true }
)
Tips:
-
immediate:true //true
就表示会立即执行。(watch默认绑定,页面首次加载时,是不会执行的。只有值发生改变才会执行。所以不加immediate:true //true
的话,首页不会触发要执行的方法) -
deep:true //true
表示深度监听,这时候就能监测到newValue值变化
到了这里,关于vue3监听路由的变化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!