router-link跳转失败（Vue router命名路由）

问题及解决办法

• 在.vue文件中，使用router-link并指定命名路由时跳转失败
• router-link的:to后指定的命名路由参数name，需要和src/router/index.js文件中定义的路由的name和对应。例如想跳转到index.js文件中已定义好的命名路由A中，:to后的name就需要写成A。

使用方式

创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。如在src/router/index.js文件中定义以下路由

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
    {
        path: '/blog/:blogId',
        name: 'BlogDetail',
        component: BlogDetail,
    }
]

在.vue文件中链接到命名路由时，可以给 router-link 的 to 属性传一个对象：

<router-link :to="{ name: 'BlogDetail', params: { blogId: 123 }}">文章标题</router-link>

与代码调用 router.push() 等价：

router.push({ name: 'BlogDetail', params: { blogId: 123 } })

官方文档

本文作者： whtli
本文链接： https://hexo.whtli.cn/archives/6cb8f3c5.html
版权声明： 遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。