关于vue的Layout跳转

1. 理解下

App.vue->>

/---/dashboard ,appvue.vue中的RouterView replace(“/”),而通过下面的，直接跳转到/dashboard，而/dashboard是有Component（Layout），而Layout中有router-view，里面的router-view，则跳转到/dashboard/console中,而且还因为/dashboard/console是/dashboard的子，才能这样（保留了顶部和左边侧边栏），否则，其他的就保留不了了

export const RootRoute: RouteRecordRaw = {

  path: '/',

  name: 'Root',

  redirect: “/dashboard”,(这个没有Componenet)

  meta: {

    title: 'Root',

  },

};

 这个是/dashboard对应的组件是Layout，而Layout中又有一个router-view,这里面的router-view重定向到/dashboard/console

const routes: Array = [

  {

    path: '/dashboard',

    name: routeName,

    redirect: '/dashboard/console',

    component: Layout,

    meta: {

      title: 'Dashboard',

      icon: renderIcon(DashboardOutlined),

      permissions: ['dashboard_console', 'dashboard_console', 'dashboard_workplace'],

      sort: 0,

},

const routes: Array = [

  {

    path: '/dashboard',

    name: routeName,

    redirect: '/dashboard/console',

    component: Layout,

    meta: {

      title: 'Dashboard',

      icon: renderIcon(DashboardOutlined),

      permissions: ['dashboard_console', 'dashboard_console', 'dashboard_workplace'],

      sort: 0,

    },

    children: [

      {

        path: 'console',

        name: `${routeName}_console`,

        meta: {

          title: '主控台',

          permissions: ['dashboard_console'],

          affix: true,

        },

        component: () => import('@/views/dashboard/console/console.vue'),

      },

      {

        path: 'workplace',

        name: `${routeName}_workplace`,

        meta: {

          title: '工作台',

          keepAlive: true,

          permissions: ['dashboard_workplace'],

        },

        component: () => import('@/views/dashboard/workplace/workplace.vue'),

      },

    ],

  },

];

Layout的某一部分