Question

大家好我正在使用Vue-Router 2.5.3并且我有以下路由结构。

 path: "/admin", component: require("./views/layouts/MasterLayout.vue"), meta: { requiresAuth: true }, children: [
                { path: 'dashboard', component: require("./views/Dashboard.vue"), alias: "/", name: "dashboard" },

                { path: 'upload', component: require("./views/Upload.vue"), name: "upload", redirect: {name: 'upload.photo'}, children: [

                    {
                        path: 'photo',
                        component: require("./components/Uploaders/ImagesUploader.vue"),
                        name: "upload.photo",
                        props: { selected: true, successEndpoint: "/api/v1/upload/complete", uploadEndpoint: "/api/v1/upload" }
                    },
                    {
                        path: 'video',
                        component: require("./components/Uploaders/VideoUploader.vue"),
                        name: "upload.video",
                        props: { selected: true, successEndpoint: "/api/v1/upload/complete", uploadEndpoint: "/api/v1/upload" }
                    }

                ] },

我有这个配置的问题，每当我导航到“管理/上传”它显示一个空白页面，我希望它默认显示“admin / upload / photo”，即使我的用户导航到“admin /上传“我怎样才能在Vue路由器中实现这一点？

我已经尝试在“上传”和子路由中定义别名，但没有发生任何事情，然后我又尝试在“上传”父路线中定义重定向键空白页......

我不太明白我的错误，是不是我的结构有两层嵌套？但是，如果这是一个问题，我如何仅使用一个嵌套级别定义这些路线？

Answer 1

没关系所有人，有些愚蠢的问题......（今天在办公室度过了糟糕的一天）

添加

alias: "/"

到您要用作默认值的子路线...

所以在我的情况下，“照片”可能会变成

 { 
    path: 'photo',
    component: require("./components/Uploaders/ImagesUploader.vue"),
    name: "upload.photo",
    alias: "/",
    props: { selected: true, successEndpoint: "/api/v1/upload/complete", uploadEndpoint: "/api/v1/upload" }
 },

因为我们想要的是“照片”响应“上传”中的根，所以我们告诉它响应上传/“照片”和上传“/”因为这些都嵌套在“上传”中“上传“路线总是先于任何一个孩子和它的别名。

VueRouter路由应默认选择第一个子节点

1 个答案: