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')
        }

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

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

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

我知道访问路由器链接之前该参数将为空，但是我需要一种解决警告的方法。我什至尝试了'v-if'方法，但在这里不起作用。

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

Answer 1

如果将to属性更改为其他格式，会发生什么情况？

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

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

1 个答案: