Vue-router：摆脱网址中的斜杠

Posted 2023-02-16

【中文标题】Vue-router：摆脱网址中的斜杠

【英文标题】：Vue-router: get rid of trailing slash in the url

【发布时间】：2022-01-09 23:57:48

【问题描述】：

设置：vue 2.6.14 & vue-router，我的路由器配置：

  mode:            'history',
  base:            document.location.pathname,
  routes: [
    
      path:      '/',
      name:      'main',
      component: Main,
      props:     (route) => 
        return 
          id: route.query.id,
        ;
      ,
      pathToRegexpOptions: 
        strict: true,
      ,
    ,
  ],

问题：我有这样的网址

local.host/page/xxx_111.html?id=111

路由器基址是/page/xxx_111.html 路径。在某些时候，我想通过编程导航将 url 更改为只是

local.host/page/xxx_111.html

换句话说，摆脱查询参数，但无论我做什么，我总是得到

local.host/page/xxx_111.html/

带有斜杠:(如何解决这个问题？

【问题讨论】：

您是否尝试过将strict参数设置为false？

@StevenSpungin 是的

【参考方案1】：

通过使路由器的path: '/*([\\w\\-]+_?[\\d]+.html)' 匹配local.host/<ANYTHING>/xxx_111.html 类型的任何url 并调用this.$router.push( query: ) 来摆脱url 参数而不在url 中添加斜杠来解决。