Vue js如何在整个项目中隐藏来自url的查询字符串

Question

如果我的路由对象是这样的，

const my_routes = [
  {
          path: "/dashboard",
          component: dashboard
        },
        {
          path: "/banners",
          component: banners
        },
        {
          path: "/paper-types",
          component: paper_types
        },
        {
          path: "/knowledge-areas",
          component: knowledge_areas
        },
]

它会一直显示在浏览器中url这样

www.someurl.com/dashboard
www.someurl.com/banners
www.someurl.com/paper-types
www.someurl.com/knowledge-areas

我只想一直显示网页 url (www.someurl.com)。

在vue js中可以实现吗？

Answer 1

您可以使用它，只需配置 mode option of Vue Router:

new VueRouter({
  routes: my_routes,
  mode: 'abstract'
});

注意：但是，您可能希望通过激活抽象模式来考虑可用性：当您的用户在整个 Web 应用程序中导航时，他们将不再能够深入链接到他们最后的状态，因为状态不再反映在散列或 URL 路径中。

Answer 2

在较新的版本中，即 vue-router 4.0.4，您必须在创建路由器时使用如下的 createMemoryHistory()：

const router = createRouter({    
    history: createMemoryHistory(),
    routes,    
});

您可以找到其他选项here.

Vue js如何在整个项目中隐藏来自url的查询字符串

Vue js how to hide the query strings from url throughout the project

javascript

vue.js

vue-router

vuejs2