vue-router 既不监视路由也不监视导航守卫开火

Posted 2023-02-22

【中文标题】vue-router 既不监视路由也不监视导航守卫开火

【英文标题】：vue-router neither watch route or navigation guards firing

【发布时间】：2018-07-14 04:58:43

【问题描述】：

在带有以下代码的单页应用程序中使用 vue-router，重定向到 mycomponent 时不会触发 watch $route 函数。

mycomponent 中的 beforeRouteUpdate 也没有触发。

如何在组件加载期间检测变量何时被标记到路由上？

App.vue

<template>
  <router-view></router-view>
</template>
<script>
import Vue from 'vue'
export default 
  name: 'app'

</script>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import MyView from '@/views/MyView'
Vue.use(Router)

export default new Router(
  routes: [
    
      path: '/',
      redirect: '/home',
      name: 'Home',
      children: [
        
          path: '/mycomponent',
          name: 'MyComponent',
          component: MyComponentView
        ,
        
          path: '/mycomponent/:id',
          component: MyComponentView,
          props: true
        
]])

我的组件.vue

<template>
  <component :is="activeComponent" :id="id"></component>
</template>

<script>
  export default 
    name: 'MyComponentView',
    components: 
      ...
    ,
    mounted: function() 
      #this logs path in browser
      console.log('>>mounted route: ' + this.$route.path)
    ,
    watch: 
      '$route': function () 
        #this does not fire
        console.log('route watcher: ' + this.$route.path)
      
    ,
    beforeRouteUpdate (to, from, next) 
      #this does not fire
      console.log('>>beforeRouteUpdate')
    ,
    data () 
      return 
        activeComponent: 'somecomponent'
      
    
  
</script>

component1.vue

...
mounted: function() 
  Event.$on('vue-tables.row-click', function(data) 
    #this logs correct information in browser
    console.log('data.row.id: ' + data.row.id)
    router.push(path: 'mycomponent', query: id: data.row.id)
  )
,
...

【问题讨论】：

您确定您的动态组件正常工作吗？

对 mycomponent 的简化工作，并且挂载的功能工作正常，只是不是 watch 或 beforerouteUpdate 功能。

【参考方案1】：

它不起作用，因为beforeRouteUpdate 在要重新加载的组件中（查看 Vue 的生命周期）。当您更改路线时，watch & beforeRouteUpdate 将终止，您将看不到任何结果。在这种情况下，您应该提供如下内容：

MainRouterView.vue

<template>
  <router-view/>
</template>

<script>
  name: 'MainRouterView',
  beforeRouteUpdate (to, from, next) 
    console.log('beforeRouteUpdate')
  ,
</script>

router.js

export default new Router(
  routes: [
    
        
          path: '/mycomponent',
          name: 'MainRouterView',
          component: MainRouterView,
          children: [
            
              path: '/mycomponent/:id',
              component: SecondComponent,
            
          ]
        ,
      ])

但是如果你想坚持你的结构并检查当前路由的状态，你可以将组件中的beforeRouteUpdate替换为beforeRouteEnter或beforeRouteLeave。您也可以在路由器中使用全局守卫beforeEach。

要更好地了解 beforeRouteUpdate 的工作原理，请查看此 sn-p：http://jsfiddle.net/yraqs4cb/