23

我对 Vue.js 2 中的默认子路由有疑问。

当我最初访问 localhost/listings 时，它会正确加载 index.vue 和 map.vue 作为孩子。

当我使用 router-link 导航到 localhost/listings/1，然后使用 router-link 返回 localhost/listings 时，它仍然会加载 show.vue 模板。这不应该发生吗？

我没有导航守卫或任何应该干扰的东西。无论如何要纠正这个问题吗？

我的路线：

window.router = new VueRouter({
    routes: [

        ...

        {
            path: '/listings',
            name: 'listing.index',
            component: require('./components/listing/index.vue'),
            children: [
                {
                    path: '',
                    component: require('./components/listing/map.vue')
                },
                {
                    path: ':id',
                    name: 'listing.show',
                    component: require('./components/listing/show.vue')
                }
            ]
        },

        ...

    ]
});
4

4 回答 4

37

如果您想要默认子路由，则不应命名“父”路由器，因此请使用:to="{name: 'listing.index'}"默认子路由的名称（例如:to="{name: 'listing.map'}"）。

代码应如下所示：

window.router = new VueRouter({
routes: [

    ...

    {
        path: '/listings',
        component: require('./components/listing/index.vue'),
        children: [
            {
                path: '',
                name: 'listing.map'
                component: require('./components/listing/map.vue')
            },
            {
                path: ':id',
                name: 'listing.show',
                component: require('./components/listing/show.vue')
            }
        ]
    },

    ...

  ]
});
于 2018-04-27T15:24:17.763 回答
27

也许尝试重新安排孩子，路线按照它们从上到下匹配的顺序被触发，所以这应该有望解决它：

window.router = new VueRouter({
    routes: [

    ...

    {
        path: '/listings',
        name: 'listing.index',
        component: require('./components/listing/index.vue'),
        children: [
            {
                path: ':id',
                name: 'listing.show',
                component: require('./components/listing/show.vue')
            }
            {
                path: '',
                component: require('./components/listing/map.vue')
            },
        ]
    },

    ...

  ]
});

只是为了澄清一点，您path: ''本质上是“包罗万象”，这可能就是为什么当它位于顶部时会立即找到它，因此路由器永远不会进一步向下传播到:id路由。

于 2016-11-23T05:57:01.127 回答
0

当您使用named routes并且想要加载包含您的孩子的组件时，您必须为孩子使用名称路由。
在您的导航菜单链接中，如果您对 使用名称路由，则parent即使子路径没有任何内容，子路径也不会自动加载。
例如，假设我们有一个 User 路由，并且我们希望默认显示组件内的用户列表，所以每当我们转到“/user”路径时，我们都希望在其中加载一个用户列表作为子路径：

routes: [
   {
     path: '/user',
     name: 'User',
     component: User,
     children: [
       {path: '', name: 'UserList', component: UserList}, // <== child path is = '';
     ]
   }
  ]

如果您考虑代码，您可能会假设如果您使用名称“User”进行路由，您也可能会在其中获得 UserList，因为父子路径都是相同的。但事实并非如此，您必须选择“UserList”作为名称。为什么会这样？因为 Vuejs 加载您所指的确切组件，而不是 url。你可以实际测试一下，而不是在你的链接中使用命名路由，你可以只引用 url，这一次 vuejs 会加载父子节点没有问题，但是当你使用命名路由时，它不会看url 并加载您所指的组件。

于 2019-09-20T10:09:27.327 回答
0

在 Vue 2.6.11 中，如果父路由被命中，您可以自动重定向到子路由：

const routes = [
  {
    name: 'parent',
    path: '/',
    component: Parent,

    children: [
      {
        name: 'parent.child',
        path: 'child',
        component: Child,
      }
    ],

    /**
    * @type {{name: string} | string} Target component to redirect to
    */
    redirect: {
      name: 'parent.child'
    }
  }
];
于 2021-11-28T16:53:34.633 回答