Question

我坚持使用第一个Vue应用程序（这是大型ASP MVC .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上。该页面包含两个单独的块，而我感兴趣的块是一种产品目录。单击任何类别提供从$axios到/Controller/GetData?key=111的请求，然后使用响应来更新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

如果您要为组件route添加子项SecondPage

像下面一样添加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作为参数附加而不是作为查询。

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

VueJS子组件路由

1 个答案: