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

时间:2018-07-01 15:05:57

标签: vue.js vue-router

我有一个用例,需要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中是否存在本机方式来进行处理?还是我应该改变自己做事的方式。

4 个答案:

答案 0 :(得分:2)

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

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('/')}} );

答案 1 :(得分:0)

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

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

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

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

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

答案 2 :(得分:0)

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

在创建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();
});

答案 3 :(得分:0)

我通过创建用于为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>