Question

我对vue-router有疑问。我该如何完成这样的路线：

domain.com/confirm/randomstring

randomString是一个令牌，显示在此模板中：

const ConfirmComp = {
  template: `<div>ConfirmComp 
    <img src="img/logo.svg">
    <h3>you confirm: {{  $route.params.token  }} </h3>
  </div>`
};

为了进行测试，我将链接添加到另一个组件中：

<router-link :to="{path:'confirm/d4r5g6hy7'}">/confirm/something</router-link>

路由器配置：

export default new VueRouter({
    mode: 'history',
    base: "/",
    routes: [
        {path: "/", component: Root},
        {path: "/suscribe", component: InscriptionComp},
        {path: "/confirm/:token", component: ConfirmComp, props: true}
    ]
});

Webpack devServer配置：

conf.devServer = {
        host: "localhost",
        historyApiFallback: true,
        proxy: {
            "/api": "http://localhost:8080"
        }
    }

事物0：在服务器上添加historyApiFallback有助于在/ xxx或/ yyy路由上呈现页面刷新，但不能使用参数（/ yyy /：token）

事物1：在链接/ confirm / r5t4y7中通过单击页面进行导航时： -组件渲染 -Param令牌ID正确显示，但图像上的-404：找不到“ /confirm/img/logo.svg”（不应具有“ / confirm”）

事物2：刷新http://localhost/confirm/t3f4g5g时 -无效：它尝试以“ / confirm”为基础而不是/

加载style.css和bundle.css

版本：vue 2.5.16，vue-router 3.0.1，webpack 4.6.0，webpack-dev-server 3.1.3，vue-loader 15.0.7

谢谢

Vue路由器，webpack-dev-server和historyApiFallback，/ foo可以，但是/ foo /：bar可以提供404（/foo/bundle.js)

0 个答案: