Change URI directly for a Vue app and caused error - vue.js

Question

In my Vue app, I can click a link generated by <router-link>...</router-link> and visit a page like: /site/books/00666.html.
The routing config for this is:
{
path: '/books/:id.html',
name: 'BookDetail',
component: BookDetail,
props: true,
}
So I changed the URI in the browser (Fx57) to: /site/books/00777.html to try to display the detail information of another book. It failed with this:
Cannot get /books/00777.html
and the debugger told me something like:
Content security policy is preventing from accessing a resource from 'self'`.
I searched on CSP but can't figure out how to make this working.
Update: To reproduce the issue, I use vue init webpack test and scafolded a blank Vue app with router support.
One new router is added:
{
path: '/book/:id.html',
name: 'BookDetail',
component: BookDetail,
props: true,
}
In the default HelloWorld.vue, just add a few lines with <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>
In the HelloWorld page, clicking the link above will take you to "localhost:8080/book/12345.html". Good.
Change the URI to "localhost:8080/book/23456.html". The browser prompts the same error as before.
Update 2： per hint below, I modified the URI pattern to '/books/:id' and it is working.
Further question: What shall I do if I want to add the .html suffix?