在浏览器地址栏中直接访问某路由

一个问题很有意思。

我的Vue应用中,可以在页面中通过点击<router-link>...</router-link>生成的URI访问一个页面,形如:http://localhost:8080/books/00666.html

这个路由的配置是:

{
      path: '/books/:id.html',
      name: 'BookDetail',
      component: BookDetail,
      props: true,
    }

于是,我直接在浏览器的URI中修改0066600777,结果出现:

Cannot get /books/00777.html

调试器显示错误是:Content Security Policy: 页面设置阻止读取位于self的一项资源("default-src http://localhost:8080")。Source: ; (function installGlobalHook(window) {...

想请教一下各位如何做到直接修改URI中的参数而直接跳转。

有一点我想说的是,这个.html后缀有点多余。

然后你说直接修改URI中的参数而直接跳转是什么意思?

你这样模糊匹配id 会不会导致,把他解析成id下面的html 例如 : {id : html} 最终导致错误。应该要加个字符串拼接吧
"path: /books/:id+’.html’ " 我也没试过这种写法,你在试试吧。因为一般只有模糊匹配id,如楼上说的 .html太多余了

谢谢楼上两位的说明和建议

@plfqz @LeeJim 关于这个html是否多余的问题,有很多讨论,我们这里不展开。我所以用这个形式,因为是要和我目前的站点保持一致(https://rsywx.net),而且我有太多的链接以.html结尾形式发送在外面,改变链接形式也是挺讨厌的。也许就作为一种向后兼容的考虑吧。

我用React在改写我站点的时候,这个路由和URI模式是很“自然”地就过渡了的,所以就想在Vue中进行同样的测试,结果发现不行了。

现在我已经暂时将.html这个后缀去掉,然后就可以直接在地址栏中访问了。

所以这个问题是vue-router路由匹配算法带来的。

并没能复现这个情况。能提供一个案例吗?

重现很简单,用vue init webpack testuri创建一个实例。

在路由中加一个诸如:

path: '/book/:id.html'

然后在首页创建几个<router-link>...</router-link>,这几个链接是可以链接过去的。但是如果在浏览器的地址栏中直接输入:/book/12345.html就会提示Cannot get的错误。

CodeSandbox 复现失败,本地 History Mode 复现成功,Hash Mode 复现失败。

Vue Router 本身的匹配逻辑是正常的(path-to-regexp 应该会默认忽略扩展名),那么问题出在 HTTP Server 上,对于 .html 没有解析到应用入口。Webpack Dev Server 使用 connect-history-api-fallback 中间件来处理 History 交互的过程,但它的默认配置会忽略直接文件请求 (Direct file request),也就是路径包含 .。要跳过这个限制,需要添加 disableDotRule: true

// webpack.config.js
module.exports = {
  // ...
  devServer: {
    historyApiFallback: {
      disableDotRule: true,
    },
  },
}

非常感谢。这个应该是讲到根上了。

不过经过测试,我这边还是不能做到这点。我修改的是config/index.js这个文件的dev段。

config/index.js 的 dev 是指开发环境的配置,不是 devServer 的意思。

@silentdepth 我没有这个webpack.config.js文件……牵涉到devServer的有一个build/webpack.dev.conf.js。但我还没有开始build我的应用……

我写 webpack.config.js 只是为了表示那是 Webpack 的配置项……对应到 vue-template-webpack 里就是 webpack.dev.conf.js,这个不是 build 用的,是 npm run dev 用的。

你好,我遇到一个类似的问题,如果你有时间的话,麻烦你帮我看看吧
描述:我用 登陆</>是能正常跳转到我指定的页面的,但是在
浏览器里直接访问 比如 localhost:8000/login 就会提示 Cannot GET /login,如下
代码应该是没有错的,
这是我的代码地址:https://github.com/Mengbuxiu/vue-ssr-tech.git

你的client 下index 入口文件,Vue实例化注入的router是config下的router,里面没有 /login的配置