时间戳

首页 > 解决方案 > Vue.js 路由器链接参数未定义

javascript - Vue.js 路由器链接参数未定义

问题描述

在我的 vue.js 中，我在 navigation.vue 中使用参数将其传递到下一页，以便用于动态路由，如下所示：

<router-link tag="p" 
  :to="{name: 'Main', params: {category: link.linkCategory}}"  
  :key="link.linkCategory">

以下是路由器 index.js 的一部分：

export default [
{
    path: '/origin/:category',
    name: 'origin',
    component: () => import('@/views/origin/origin.vue'),
    props: true,
    children: [
        {
            path: '',
            name: 'Main',
            props: true,
            component: () => import('@/views/origin/Main.vue')
        }

所以基本上我将“类别”值作为动态路由的参数传递。但是，每当我尝试通过路由器链接访问时，我都会在控制台中收到此警告消息：

[vue-router] 缺少命名路由“Main”的参数：要定义预期的“类别”

为方便起见，所有 linkCategory 值都存储在单独的链接 js 文件中，并且当单击每个链接时，路由确实会获取这些值。所有页面的路由工作正常，但控制台警告非常烦人......

我知道在访问路由器链接之前该参数将为空，但我需要一种方法来绕过警告。我什至尝试了“v-if”方法，但在这里没有用。

请为我所做的错误事情修复我的代码。

标签： javascriptvue.js

解决方案

如果您将to属性更改为不同的格式，如下所示会发生什么？

<router-link tag="p" 
  :to="`/origin/${link.linkCategory}`"  
  :key="link.linkCategory"

推荐阅读