帶有參數的 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>

當我選擇Example Link我得到mydomain.com/example/raaaaf 。

在第一次加載時，它呈現正確的模板，但是當我刷新或手動輸入地址欄上的鏈接時，我被重定向到我的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

我不知道其他人是否面臨同樣的問題，但我在刷新時獲取路由參數時遇到問題。 我試圖獲取的路由參數是一個 ID 號，我使用該 ID 來獲取數據並填充頁面。 我發現（通過許多控制台日志）當我刷新時，數字變成了一個字符串，這就是頁面不工作的原因。 我整理了它，但在使用它之前將 ID 轉換為數字：

Number($route.params.id)

Answer 2

您需要正確配置您的服務器。 您的服務器正在/example/raaaaf目錄中尋找索引文件。 我仔細閱讀了這個頁面： http : //router.vuejs.org/en/essentials/history-mode.html

Answer 3

我在我的項目上使用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>

當我選擇Example Link我得到mydomain.com/example/raaaaf 。

首次加載時，它會呈現正確的模板，但是當我刷新或手動在地址欄上輸入鏈接時，我將重定向到“ Page Not Found頁面”頁面，並且不會觸發創建頁面時調用的方法。

這是我在ExampleComponent上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>