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

Question

在我的 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' 方法，但在这里不起作用。

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

Answer 1

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

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