web-dev-qa-db-ja.com

vue 2）のコンポーネントなしでvue-routerを使用することは可能ですか？

非常に単純なページがあり、コードが数行しかないので、vue-componentなしでvue-routerを使用したいと思います。

ルートの後にstring "my-search-query"を取得したい：

www.example.com/my-search-query

メインのVue（）オブジェクトで使用します。これは可能ですか？

ありがとうございました！

vue.jsvuejs2vue-componentvue-router
9
Jinjinov

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に感謝します！

4
Jinjinov

ルーターはビューモデルインスタンスの一部であるため、ルーターのパス値を返す計算関数を作成できます。たとえば、次のことができます。

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

これにより、ルーターが履歴を管理しますが、コードをコンポーネントに分割する必要はありません。たとえば、私はかなり小さなページを持っていて、すべてをコンポーネントに分割せずに、すべてを同じviewModelに入れたいと思っていました。

1
Jon Duelfer

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 )
  }
}
1
samayo