Vuejs 라우터, JavaScript 코드의 조건부 로딩

Vuejs 라우터, JavaScript 코드의 조건부 로딩

나는 Vue Router를 내 어플리케이션에 통합하고 있다.

구성 요소 중 하나에서 다른 경로에 있을 때 로드하거나 존재하지 않을 js 코드를 사용하고 있는가?

예

compA.vue
<script>console.log('hello')</script>

app.com/a -> I should see console log Hello.

app.com/b -> when I access this I should not see hello in the console.

편집: 응답에 기반하여 명확화.

두 개의 구성요소가 있는데, 각각 라이프사이클 후크를 가지고 있기 때문에 구성요소를 기반으로 함수를 발사하기 위한 논리를 설정할 필요가 없다...

사용자가 compA를 방문하면 기능이 작동하여 부작용이 생긴다면 compB를 방문할 때 기존 루트가 작동하는 방식과 유사한 부작용이 발생하지 않기를 바란다. 왜냐하면 새로운 코드를 얻고 페이지를 한 번 더 렌더링하기 때문이다.

다음 경로 변수를 사용하여 액세스할 수 있는 경로 변수를$routervue로vue devtools를 열고 구성 요소를 클릭한 다음 8/8 쪽에서 $route를 클릭하십시오.여기서 당신은 모든 변수들을 볼 수 있다.$route

예:

  mounted() {
    // console.log will only run on route '/a'
    if (this.$route.path === '/a') {
        console.log('Hello World)
    }
  }

만약$route오류를 범하다이것을 정의해야 한다.main.js

  import router from './router'

  new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
  })

에router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/app/Login/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    }
  ]
})

라우팅 구성에 몇 가지 메타데이터를 추가할 수 있음:

const router = new VueRouter({
  routes: [
    {
      path: '/a',
      component: compA,
      meta: { doLog: true }
    },
    {
      path: '/b',
      component: compA,
      meta: { doLog: false }
    },
  ]
})

그리고 나서 당신은 사용할 수 있다.this.$route.meta.doLog구성 요소:

created() {
  if(this.$route.meta.doLog) {
     console.log('hello');
  }
}

참조URL: https://stackoverflow.com/questions/51364078/vuejs-router-conditional-loading-of-javascript-code