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

【问题标题】：Vuejs: Router links not correct after passing paramsVuejs：传递参数后路由器链接不正确
【发布时间】：2021-06-02 08:06:28
【问题描述】：

在我将参数传递给组件之前，路由器链接都可以正常工作。组件使用参数正确加载，但之后当我想导航到另一个链接时，路由不会正确变回。

例如：

我去 /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'},
    ]
    }),
}

【问题讨论】：

您能否在示例代码中添加以显示/info 路由本身以及用于（重新）定向到/info 的链接或其他代码？
我添加了更多代码。希望对你有帮助

标签： vue.js vue-router

【解决方案1】：

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

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

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

【讨论】：