Question

我有一个用例，需要vue路由的id部分包含未转义的正斜杠。

我当前的路线如下：

{
    path: '/browse/:path*',
    component: browse,
    name: 'browse',
    displayName: 'Browse',
    meta: { title: 'Browse' },
},

因此，当用户浏览上述网址时，将显示浏览组件。

但是，我想使用路径（:path*）的id部分包含一个可嵌套的文件系统，例如要由我的浏览页面使用的路径。

例如，URL /browse/project/project1会将我带到目录1项目的树下两层。

现在，我遇到的问题是，vue路由器以编程方式导航时正在转义我的ID（路径），并且我的URL最终像这样：/browse/project%2Fproject1。这是不理想的，对最终用户而言并不理想。另外，如果用户确实手动浏览到/browse/project/project1，则该应用将正常运行，甚至将原始编码保留在网址栏中。

因此，我可以通过创建任意数量的子路径来解决此问题，并希望系统永远不会越过这些路径，但这不是解决我的问题的好方法。

我还应该澄清，/browse之后的应用程序对路径一无所知，因为该路径是由为应用程序供电的api动态生成的。

vue-router中是否存在本机方式来进行处理？还是我应该改变自己做事的方式。

Answer 1

没有解决方法，这是一个更优雅的解决方案。

Vue路由器在幕后使用path-to-regexp模块，其结构类似

const regexp = pathToRegexp('/browse/:path*')
// keys = [{ name: 'browse', delimiter: '/', optional: true, repeat: true }]

https://github.com/pillarjs/path-to-regexp#zero-or-more

const regexp = pathToRegexp('/browse/:path+')
// keys = [{ name: 'browse', delimiter: '/', optional: false, repeat: true }]

https://github.com/pillarjs/path-to-regexp#one-or-more

将重复标志设置为true。任何带有 repeat 标志的数组参数都将与定界符（默认为'/'）连接。

因此您可以将拆分的数组['project','project1']而不是'project/project1'传递到router.push()中：

router.push( {name: 'browse', params: {path: ['project','project1']}} );

或

router.push( {name: 'browse', params: {path: 'project/project1'.split('/')}} );

Answer 2

我在遇到类似问题时偶然发现了你的问题。

这是因为id应该标识一个资源，而不是资源的嵌套结构/路径。

尽管我还没有解决我的问题，但是您可能要使用的是customQueryString：

https://router.vuejs.org/api/#parsequery-stringifyquery

https://discourse.algolia.com/t/active-url-with-vue-router-for-facet-and-queries/3399

Answer 3

所以我设法通过一些修改来“解决”这个问题。

在创建Vue路由器实例时，我将附加一个beforeEach函数来替换任何'/'编码。这会将我要查找的“正确” URL发送给客户端。

const router = new Router({
    mode: 'history',
    routes,
});

router.beforeEach((to, from, next) => {
    // hack to allow for forward slashes in path ids
    if (to.fullPath.includes('%2F')) {
        next(to.fullPath.replace('%2F', '/'));
    }
    next();
});

Answer 4

我通过创建用于为vue路由器链接的:to属性生成href的助手来修复了该问题。

首先，我使路由器可以访问我的新帮助服务，例如此处Access router instance from my service

然后我创建了router-helpers.js，在这里我做了我的助手，这是一个示例

import Vue from 'vue'
import router from '../router.js'

// replace %2F in link by /
const hrefFixes = function(to) {
  return to.replace(/%2F/g, '/')
}

// my link helper
Vue.prototype.$linkExample = attr => {
  // create "to" object for router resolve
  const to = { name: `route-name`, params: { param1: attr } }

  // this will resolve "to" object, return href param as string
  // and then i can replace %2F in that string
  return hrefFixes(router.resolve(to).href)
}

只需在您的Vue应用程序中包含一次此服务，然后像这样使用此帮助程序

<router-link :to="$linkExample(attr)">text</router-link>

vue路由器ID中的自定义处理正斜杠

4 个答案: