vue-router懒加载的配置以及路由的一些小知识

路由跳转回到顶部

在router的index.js里面配置

// 路由跳转回到顶部
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    return { x: 0, y: 0 }
  }

路由传参

用parmas传的参数刷新页面会消失，用query不会，但是query不美观

路由懒加载(跳转到当前路由，才会开始加载)

懒加载写法

{
      path: '/newsCenter',
      component: resolve => require(['@/views/NewsCenter.vue'], resolve),
      children: [
        {
          path: '',
          redirect: '/newsCenter/industryNews'
        },
        {
          path: 'industryNews',
          name: 'industryNews',
          component: resolve => require(['@/components/IndustryNews'], resolve),
        },
        {
          path: 'companyNews',
          name: 'companyNews',
          component: resolve => require(['@/components/CompanyNews'], resolve),
        }
      ]
    },

正常的写法

{
      path: '/newsCenter',
      component: () => import('../views/NewsCenter.vue'),
      children: [
        {
          path: '',
          redirect: '/newsCenter/industryNews'
        },
        {
          path: 'industryNews',
          name: 'industryNews',
          component: () => import('../components/IndustryNews/index.vue')
        },
        {
          path: 'companyNews',
          name: 'companyNews',
          component: () => import('../components/companyNews/index.vue')
        }
      ]
    },