vue 2의 컴포넌트 없이 vue-router를 사용할 수 있습니까?

vue 2의 컴포넌트 없이 vue-router를 사용할 수 있습니까?

매우 간단한 페이지가 있고 코드 몇 줄만 표시되며 vue-component가 없는 vue-router를 사용하고 싶습니다.

저는 이 제품을 구입하고 싶습니다.string "my-search-query"루트 다음:

www.example.com/my-search-query

메인 Vue() 오브젝트에서 사용합니다.이게 가능합니까?

감사해요!

사용할 수 있습니다.vue-router없이vue-component메인 Vue() 어플리케이션오브젝트 경로 변경에 대한 알림은 계속됩니다.

당신은 그것을 얻을 수 있습니다."my-search-query"에서 줄을 매다.www.example.com/#/my-search-query다음과 같습니다.

const router = new VueRouter({
  routes: [
    { path: '/:question' }
  ]
})

const app = new Vue({
  el: '#app',
  router,
  watch: {
    '$route.params.question': function(newVal, oldVal) {
      alert(newVal === 'my-search-query');
    }
 }
});

@samayo님 덕분에 올바른 방향으로 안내해 주셔서 감사합니다!

라우터는 뷰 모델인스턴스의 일부이므로 라우터의 경로 값을 반환하는 계산 함수를 작성할 수 있습니다.예를 들어, 다음을 수행할 수 있습니다.

data: function() {
    router: new VueRouter()
},
computed: function() {
    routerPath: function() {
        return this.router.currentRoute.path;
    }
},
watch: function() {
    routerPath: function(val) {
        switch(val) {
            case '/':
                // @TODO: logic for home
                break;
            case '/path1':
                var query = this.router.currentRoute.query;
                // @TODO: logic form query params
                break;
        }
    }
}

이것에 의해, 라우터가 이력을 관리합니다만, 코드를 컴포넌트로 분할할 필요는 없습니다.예를 들어, 저는 페이지가 작아서 모든 것을 컴포넌트로 분할하지 않고 동일한 뷰모델로 만들고 싶었습니다.

tom_h가 말했듯이window.location.pathname경로 이름만 알고 싶을 때 사용합니다.경로 이름이 변경될 때 알림을 받으려면 먼저 경로 이름을 data(){} 개체로 초기화하고 다음과 같이 확인하십시오.

data () {
  return {
    path: window.location.pathname
  }
},

watch: {
  path (newpath, oldpath) {
    alert('location path just changed from ' + newpath + ' to ' + oldpath )
  }
}

언급URL : https://stackoverflow.com/questions/47678395/is-it-possible-to-use-vue-router-without-a-component-in-vue-2