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

Posted 2023-02-23

【中文标题】是否可以在 vue 2 中使用没有组件的 vue-router？

【英文标题】：Is it possible to use vue-router without a component in vue 2?

【发布时间】：2018-05-20 13:50:22

【问题描述】：

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

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

www.example.com/my-search-query

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

谢谢！

【问题讨论】：

如果您只想使用 vue-router，请使用 window.location.pathname

@tom_h 当路径更改为“my-other-search-query”时如何通知我？抱歉新手问题，我刚开始学习vue。

【参考方案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 为我指明了正确的方向！

【讨论】：

我在组件总是相同的情况下使用了这种方法，因此路由器视图似乎是多余的，但我很快发现自己处于一个奇怪的地方，试图手动处理所有观察者。我认为将来我会使用 并尝试使用路由本身中的props 选项连接查询/参数传递。 (router.vuejs.org/guide/essentials/…)

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

【参考方案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 )
  

【讨论】：

这将在path 更改时通知，但不会在window.location.pathname 更改时通知。

但是当窗口路径名也改变时路径也会改变

你能给我看一个例子，location.pathname 改变并且你的观察者实际上被触发了吗？

如果您坚持不懈，那么也许我错了，因为我认为会是这种情况..但我仍然会对其进行测试并更新答案..我在移动设备上正确的 noe

@samayo 我已经按照您的建议进行了尝试，但是当我在我的根目录后面键入“my-search-query”并按 Enter 时，我得到的只是来自我的 Apache 服务器的 404。抱歉我的菜鸟问题，我是 javascript / vue 的新手。