是否可以在 vue 2 中使用没有组件的 vue-router？

Question

我有一个非常简单的页面，只有几行代码，我想在没有 vue-component 的情况下使用 vue-router。

我想在root之后得到string "my-search-query"：

www.example.com/my-search-query

并在我的主 Vue() 对象中使用它。这可能吗？

谢谢！

Answer 1

可以在没有vue-component 的情况下使用vue-router，并且仍然会收到有关主Vue() 应用程序对象中路径更改的通知：

您可以像这样从www.example.com/#/my-search-query 获取"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 为我指明了正确的方向！

Answer 2

由于路由器是您的视图模型实例的一部分，您可以创建一个计算函数来返回路由器的路径值。例如，您可以执行以下操作：

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 中，而不是将所有内容分解为组件。

Answer 3

正如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 )
  }
}