조건부 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
'source' 카테고리의 다른 글
Vue 템플릿에서 중첩된 개체 속성에 쉽게 액세스할 수 있는 방법이 있습니까? (0) | 2022.08.30 |
---|---|
Java 8의 맵 목록 (0) | 2022.08.30 |
(VueJ) vue-router가 여러 경로를 일치시킵니다. (0) | 2022.08.30 |
Vue Dev Tools(vue2/vuex3)에서 Vuex 스토어가 검색되지 않음 (0) | 2022.08.30 |
커스텀 listview어댑터의 getView메서드가 여러 번 호출되고 일관성 없는 순서로 호출됨 (0) | 2022.08.30 |