VueJS子组件工艺路线

Question

我坚持使用我的第一个Vue应用程序(它是大型ASP .net应用程序的一部分)，我有一个有三个页面的应用程序。

<router-link to="/Controller/FirstPage" class="list-numbered-item">
  FirstPage
</router-link>
... SecondPage, LastPage...

<div class="content-main">
  <router-view></router-view>
</div>

export const routes = [
    {
        name: 'Home',
        path: '/Controller/FirstPage',
        component: FirstPage,
    },
    {
        name: 'SecondPage',
        path: '/Controller/SecondPage',
        component: SecondPage,
    },
    {
        name: 'LastPage',
        path: '/Controller/LastPage',
        component: LastPage,
    },
];


let router = new VueRouter({
    mode: 'history',
    linkActiveClass: "active", 
    linkExactActiveClass: "active",
    routes
});

export default router;

这部分看起来没问题。

问题出在我的SecondPage上。这个页面包含两个独立的区块，我感兴趣的区块是一种产品目录。单击任何类别提供了对/Controller/GetData?key=111的$axios请求，然后我使用response更新data()属性。但现在我知道Vue Route有一个包含子路由的功能。

​

​

我尝试将类似以下内容添加到我的路由对象中：

    {
        name: 'SecondPage',
        path: '/Controller/SecondPage',
        component: SecondPage,
        children: [
            {
                path: 'Controller/Catalog',
                component: CatalogComponent,
            },
        ]
    },

我在SecondPage上的目录块现在有了类别和路由器视图部分的链接。

<router-link to="/Controller/Catalog/GetData?key=111">Category 1</router-link>
... Category 2, Category 3...

<div class="catalog-div">
  <router-view></router-view>
</div>

我想要的是选择任何类别并在我的目录块中查看产品数据。但是任何点击都会将我从/Controller/SecondPage重定向到/Controller/Catalog/GetData***。如何将路由添加到我的目录块并保持在SecondPage上？或者这可能是一种错误的方式来处理这样的用例？谢谢!

Answer 1

如果您正在尝试为组件SecondPage添加子route

添加route，如下所示

{
    name: 'SecondPage',
    path: '/Controller/SecondPage',
    component: SecondPage,
    children: [
        {
            name: 'catalog' // use name for navigation
            path: 'Catalog/:key', // using key as parameter
            component: CatalogComponent,
        },
    ]
},

现在，在组件内部

<router-link :to="{name:'catalog',params:{key:111}}">Category 1</router-link>

单击它将导航到路径/Controller/SecondPage/Catalog/111

请注意，key将附加url作为参数，而不是作为查询。

没有必要使用name，您可以使用路径。