vue基础之动态路由

动态路由：

    当路由发生切换时，并不会重新渲染路由组件，而会使用已经渲染过的路由组件（只会会修改路由参数值），这样增加了程序的高效及时性；

    另一方面，组件的生命周期钩子回调函数将不再会调用！

方法一；

routes: [

  {

    path: '/login',

    name: 'login',

    meta: {

      roles: ['admin', 'user']

    },

    component: () => import('../components/Login.vue')

  },

  {

    path: 'home',

    name: 'home',

    meta: {

      roles: ['admin']

    },

    component: () => import('../views/Home.vue')

  },

]

方法二；

// dynamicRoutes.js

// 将需要动态注册的路由提取到vuex中

const dynamicRoutes = [

 {

  path: '/manage',

  name: 'Manage',

  meta: {

   requireAuth: true

  },

  component: () => import('./views/Manage')

 },

 {

  path: '/userCenter',

  name: 'UserCenter',

  meta: {

   requireAuth: true

  },

  component: () => import('./views/UserCenter')

 }

]