감시 경로나 내비게이션 가드 중 어느 쪽도 발포하지 않습니다.

감시 경로나 내비게이션 가드 중 어느 쪽도 발포하지 않습니다.

아래 코드와 함께 단일 페이지 응용 프로그램에서 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.displaces를 표시합니다.

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
        }
]}]})

마이 컴포넌트표시하다

<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>

컴포넌트 1표시하다

...
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}})
  })
},
...

이게 안 되는 이유는beforeRouteUpdate새로고침할 컴포넌트에 있습니다(Vue의 라이프 사이클을 보세요).경로를 변경할 때watch&beforeRouteUpdate종료되어 아무 결과도 표시되지 않습니다.이 시나리오에서는 다음과 같은 정보를 제공해야 합니다.

MainRouter View(메인 라우터 뷰)표시하다

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

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

router.displaces

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

하지만 구조를 유지하고 현재 경로의 상태를 확인하고 싶다면 대체하면 됩니다.beforeRouteUpdate로.beforeRouteEnter또는beforeRouteLeave컴포넌트 내에 있습니다.글로벌 가드를 사용할 수 있습니다.beforeEach라우터에서도 마찬가지입니다.

방법을 더 잘 이해하기 위해beforeRouteUpdate동작합니다.이 스니펫을 참조해 주세요.

언급URL : https://stackoverflow.com/questions/48603905/vue-router-neither-watch-route-or-navigation-guards-firing