YDOOK:vue3:vue-cli4: 复用组件 vue2 beforeRouteUpdate 在 vue3中的使用

© YDOOK JY Lin

1. Vue2 使用方法：

复用组件时，想对路由参数的变化作出响应的话，你可以简单地2.2 中引入的 beforeRouteUpdate 导航守卫：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

使用时，记得在末尾调用 next()，以使得路由继续进行。

2. Vue3 使用方法：

在vue3中，复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }
}

3. 当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

最后

以上就是有魅力蜗牛为你收集整理的YDOOK:vue3:vue-cli4: 复用组件 vue2 beforeRouteUpdate 在 vue3中的使用YDOOK:vue3:vue-cli4: 复用组件 vue2 beforeRouteUpdate 在 vue3中的使用的全部内容，希望文章能够帮你解决YDOOK:vue3:vue-cli4: 复用组件 vue2 beforeRouteUpdate 在 vue3中的使用YDOOK:vue3:vue-cli4: 复用组件 vue2 beforeRouteUpdate 在 vue3中的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。