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

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

Answer 2

我不知道是否有其他人如果遇到同样的问题，但我在刷新时遇到路线参数问题。我试图得到的路由参数是一个ID号，我使用该ID来获取数据并填充页面。我发现（通过许多控制台日志）当我刷新时，数字变成了一个字符串，这就是为什么页面无效。我把它整理出来，但在使用它之前将ID转换为数字：

Number($route.params.id)

Answer 3

试试看！您也可以使用query: { username: raaaaf }

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

或

<router-link :to="{ name: 'example-profile', query: { username: raaaaf } }">Example Link</router-link>

使用params的vue-router路由无法在页面上重新加载

3 个答案: