带有参数的 vue-router 路由在页面重新加载时不起作用

Question

我在我的项目中使用 vue-router。

我能够完美地导航到我命名的路线。我唯一的问题是，当我使用需要参数的命名路由时，刷新页面时它不会加载。

这是我的路线：

'/example/:username': {
    name: 'example-profile',
    title: 'Example Profile',
    component: ExampleComponent
}

我就是这样使用 vue-router route:

<a v-link="{ name: 'example-profile', params: { username: raaaaf } }">
    Example Link
</a>

当我 select Example Link 我得到 mydomain.com/example/raaaaf.

第一次加载时，它呈现正确的模板，但是当我刷新或在地址栏上手动输入 link 时，我被重定向到我的 Page Not Found 页面，并且在页面创建未触发。

这是我的 ExampleComponent:

    <template>
    <div class="small-12 left">
        <side-bar></side-bar>
        <div class="store-right">
            <store-details></store-details>
            <store-menu></store-menu>
            <store-listings></store-listings>
        </div>
    </div>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    username: null,
                    user: null,
                }
            },
    
            created() {
                this.getUser()
            },
    
            methods: {
                getUser() {
                    console.log(this.$route.params);
                }
            }
        }
    </script>

Answer 1

您需要正确配置您的服务器。您的服务器本质上是在 /example/raaaaf 目录中寻找索引文件。我仔细阅读了这一页：http://router.vuejs.org/en/essentials/history-mode.html

Answer 2

我不知道是否还有其他人遇到同样的问题，但我在刷新时获取路由参数时遇到了问题。我试图获取的路由参数是一个 ID 号，我使用该 ID 获取数据并填充页面。我发现（通过许多控制台日志）当我刷新时，数字变成了一个字符串，这就是页面无法正常工作的原因。我整理了一下，但在使用之前将 ID 转换为数字：

Number($route.params.id)

带有参数的 vue-router 路由在页面重新加载时不起作用

vue-router route with params not working on page reload

vue.js

vue-router