小编Nam*_*ysh的帖子

我在我的项目中使用 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() { …

在 vue 项目应用程序的 main.js 中，我使用 API 的返回值设置套接字 io url。

const url = getAPIAddress(params); //API promises\n

我的问题是 main.js 没有异步函数。所以我可以\xc2\xb4t使用async/await。

我怎么能这么做呢？或者有更好的方法吗？

//main.js示例

import VueSocketIOExt from "vue-socket.io-extended";\nimport io from "socket.io-client";\nimport getAPIAddress from "getAPIAddress";\n    \nconst url = getAPIAddress(params); //API promises\nconst socket = io(url, { autoConnect: false });\n    \nVue.use(VueSocketIOExt, socket, { store });\n    \nVue.config.productionTip = false;\n    \nVue.use(VuetifyDialog, {\n  context: {\n    vuetify,\n  },\n});\n