如何在Nuxt路由的URL中使用#符号作为路径参数分隔符

#是URL规范里的哈希片段标识符，浏览器发起网络请求时不会将#之后的内容发送给服务端，同时Nuxt底层依赖的vue-router的路由path默认仅匹配URL的路径部分（即#之前的内容），因此直接在route配置的path中写#无法命中规则，自然返回404。

你可以通过以下两种方案实现需求：

方案一：解析哈希内容（推荐，符合URL规范） #

不需要修改路由匹配规则，仅匹配#之前的路径，在页面内自行解析哈希部分获取参数。

步骤1：修改路由配置 #

router: {
  extendRoutes(routes, resolve) {
    routes.push({
      // 仅匹配#之前的路径段
      path: '/:id/:location',
      components: {
        default: resolve(__dirname, 'pages/_id')
      },
      chunkNames: {
        modal: 'pages/_id'
      }
    })
  }
}

步骤2：页面内解析哈希参数 #

在pages/_id.vue中添加哈希解析逻辑，即可拿到你需要的param2参数：

export default {
  // 页面初始化时读取哈希
  created() {
    const hashVal = window.location.hash
    if (hashVal.startsWith('#/')) {
      // 截取#/之后的内容即为你要的param2
      const action = hashVal.slice(2)
      // 在这里处理对应业务逻辑即可
    }
  },
  // 如需监听哈希变化触发更新，添加监听规则
  watch: {
    '$route.hash'(newHash) {
      if (newHash.startsWith('#/')) {
        const action = newHash.slice(2)
        // 处理哈希变更后的业务逻辑
      }
    }
  }
}

注意：哈希内容不会传递到服务端，如果你的param2参数需要在服务端渲染阶段使用，该方案不适用，请选择方案二。

方案二：URL编码#（不推荐） #

如果你必须将#作为路径的一部分而非哈希标识符，可以将路径中的#做URL编码为%23，此时你的访问路径应为/something/param1/%23/param2，原有路由配置path: '/:id/:location/#/:action'即可正常匹配命中。
该方案的缺点是URL不直观，用户手动输入时需要编码，不符合常规URL使用习惯。

内容的提问来源于stack exchange，提问作者drake035