Vuejs：传递参数后路由器链接不正确

Question

路由器 link 都在工作，直到我将参数传递给组件。该组件使用参数正确加载，但在那之后当我想导航到另一个 link 时，路由没有正确变回。

例如：

我转到 /error/123，然后转到 /info -> 我得到的是 /error/info

有人遇到过类似的问题吗？

routes: [
{
   path: '/errors',
   name: 'errors',
   component: Errors
},
{
   path: '/error/:id',
   name: 'error',
   component: Errors
},
{
   path: '/info',
   name: 'info',
   component: Info
}]
// link in another component

<v-btn :to="{ name: 'error', params: { id: id } }">Go to</v-btn>

// in error compompent

if(this.$route.params.id) {
   this.$store.dispatch("single_error", this.$route.params.id)
}

// navigation 

<v-navigation-drawer
    v-model="drawer"
    app
>
    <v-list dense v-for="(nav, i) in navs" :key="i">
        <v-list-item :to=" { path: nav.path }">
            <v-list-item-action>
                <v-icon>{{ nav.icon }}</v-icon>
            </v-list-item-action>
            <v-list-item-content>
                <v-list-item-title>{{ nav.title }}</v-list-item-title>
            </v-list-item-content>
        </v-list-item>
    </v-list>
</v-navigation-drawer>

// data for navigation

export default {
    data: () => ({
    drawer: null,
    navs: [
      { path: '/', icon: 'home', title: 'Home'},
      { path: 'errors', icon: 'error', title: 'Errors'},
      { path: 'info', icon: 'help', title: 'Info'},
    ]
    }),
}

Answer 1

您的 navs 元素中的 URL 路径没有初始 /。试试这个：

    navs: [
      { path: '/', icon: 'home', title: 'Home'},
      { path: '/errors', icon: 'error', title: 'Errors'},
      { path: '/info', icon: 'help', title: 'Info'},
    ]

顺便说一句，我建议你也使用导航器中的命名路由。

Vuejs：传递参数后路由器链接不正确

Vuejs: Router links not correct after passing params

vue.js

vue-router