조건부 vue-router 로드

조건부 vue-router 로드

다음과 같이 메인 vue 인스턴스에 라우터를 설정합니다.

router.syslog:

const router = new VueRouter({
    routes: []
});

기본 Vue 인스턴스:

import router from '@/router';

window.app = new Vue({
    el: '#vue',

    router,

    // etc.
});

Vue 컴포넌트를 어디에서나 사용하고 있기 때문에 이 Vue 인스턴스가 설정되어 있는 PHP 어플리케이션 내에서 실행하고 있습니다.

라우터는 제가 몇 페이지만 사용하는 거예요.Vue Javascript 라우터를 사용할 수 있도록 하고 싶은 것은 특정 PHP 페이지뿐입니다.

PHP 페이지에서도,router-view라우터가 아직 활성화되지 않았습니다.이것은 fragment로 확인할 수 있습니다.

#/

라우터가 특정 PHP 루트(예를 들어)에서만 시작되도록 하려면 어떻게 해야 합니까?

페이지에 글로벌 js 변수를 추가할 수 있습니다.라우터가 필요한지 아닌지를 정의합니다.당신의 php 코드로 식별할 수 있다고 생각합니다.

따라서 php 측에서 true 또는 flase 조건에 따라 이와 같은 내용을 쓸 수 있습니다.

// you can set this variable as per your need 
$needRouter = false;

html 템플릿 내

템플릿 엔진(예를 들어 twig 사용)이 이 변수를 템플릿에 전달할 경우

<script>
    window.needRouter = {{ needRouter }};
</script>

또는 코어 php를 사용하고 싶은 경우

echo '<script>window.needRouter = ' . ($needRouter ? 'true' : 'false') . ';</script>';

그러면 조건에 따라 <script> window.needRouter = true;/script> 또는 <script> window.needRouter = false;/script> 가 출력됩니다.

이제 메인 내부로 들어갑니다.

import router from '@/router';

let vueOptions = {
    el: '#vue', 
    // we will not assign route here
    // etc.
};

if(window.needRouter) {
    // we will assign route here if window.needRoute is true
    vueOptions.router = router;
}

window.app = new Vue(vueOptions);

php에서 js변수를 어떻게 설정했는지 혼란스러우면 코멘트를 주세요.

언급URL : https://stackoverflow.com/questions/47636204/conditionally-load-vue-router