vue-router中的误区

47 阅读1分钟

误区一

配置routes时,第一层配置的路由对应的组件会展示在App.vue的<router-view>中,不论路径名是什么

    const routes = [
    {
        path:'/',
        redirect:'/home'
    },{
        path:'/home',
        component:() => import('../components/Home.vue')
    },{
        path:'/home/one',
        component:() => import("../components/HomeOne.vue")
    }
]
    //Home、HomeOne组件都会展示在App中

误区二

路由表中children的内容永远会展示在他父组件的<router-view>

const routes = [
    {
        path:'/',
        redirect:'/home'
    },{
        path:'/home',
        redirect:'/home/one',
        component:() => import('../components/Home.vue'),
        children:[
            {
                path:'two',
                //展示在Home组件的<router-view>中
                component:() => import('../components/HomeTwo.vue')
            }
        ]
    },{
        path:'/home/one',
        component:() => import("../components/HomeOne.vue")
    }
]