Question

在我的Vue应用中，我可以点击<router-link>...</router-link>生成的链接，然后访问以下网页：/site/books/00666.html。

此路由配置为：

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

所以我将浏览器中的URI（Fx57）更改为：/site/books/00777.html以尝试显示另一本书的详细信息。它失败了：

无法获取/books/00777.html

并且调试器告诉我类似的事情：

内容安全策略阻止从“self”访问资源。

我在CSP上搜索但无法弄清楚如何使其正常工作。

更新：为了重现此问题，我使用vue init webpack test并scafolded一个支持路由器支持的空白Vue应用。

添加了一个新路由器： { path: '/book/:id.html', name: 'BookDetail', component: BookDetail, props: true, }
在默认HelloWorld.vue中，只需添加几行<router-link>：

<ul> <li><router-link :to="{name: 'BookDetail', params: {id: 12345} }">Book 1</router-link></li> <li><router-link :to="{name: 'BookDetail', params: {id: 23456} }">Book 2</router-link></li> </ul>

在HelloWorld页面中，单击上面的链接将转到“localhost：8080 / book / 12345.html”。好。
将URI更改为“localhost：8080 / book / 23456.html”。浏览器会提示与以前相同的错误。

更新2 ：根据下面的提示，我将URI模式修改为'/ books /：id'，它正在运行。

进一步的问题：如果我想添加.html后缀，我该怎么办？

直接为Vue应用更改URI并导致错误

0 个答案: