【Vue】Re16 Router 第三部分(懒加载、子路由)

一、配置路由懒加载

懒加载的原因：

因为组件不断的增加，项目的路由会越来越多

打包后的文件越来越大，当超过IO读写的瓶颈时，项目加载就很慢了

所以需要将路由文件分离，在被调用时进行加载

分析路由index.js文件：

import Vue from 'vue';
import Router from 'vue-router';
import Home from "../components/Home";
import About from "../components/About";
import User from "../components/User";

Vue.use(Router);

const routerList = [
  /* 重定向首页路由配置 */
  {
    path : '', /* 缺省值默认指向 '/' */
    redirect : '/home',
  },
  {
    path : '/home', /* 为什么这里是path不是url？ 因为完整的url还包括 项目根url（协议头 + 域名（或者IP地址） + 端口号 + 项目根名称路径（可选））  */
    name : 'home', /* 名字可以不加 */
    component : Home
  },
  {
    path : '/about',
    name : 'about',
    component : About
  },
  {
    path : '/user/:username', /* 动态路径：冒号+字符 */
    name : 'user',
    component : User
  }
]
const router = new Router({
  routes : routerList,
  mode : 'history',
});
export default router;

可以看到如果有多少组件，上面就必须import多少

那么项目运行读取此文件必然需要读完import内容

如果import内容太多，将会导致执行效率降低

懒加载配置方式：

三种方式

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

/* 方式一 */
const Home = resolve => {
  require.ensure(
    ['../components/Home.vue'],
    () => resolve(require('../components/Home.vue'))
  )
}
/* 方式二 */
const About = resolve => {
  require(['../components/About.vue'],resolve);
}
/* 方式三 */
const User = () => import('../components/User.vue');

const routerList = [
  /* 重定向首页路由配置 */
  {
    path : '', /* 缺省值默认指向 '/' */
    redirect : '/home',
  },
  {
    path : '/home', /* 为什么这里是path不是url？ 因为完整的url还包括 项目根url（协议头 + 域名（或者IP地址） + 端口号 + 项目根名称路径（可选））  */
    name : 'home', /* 名字可以不加 */
    component : Home
  },
  {
    path : '/about',
    name : 'about',
    component : About
  },
  {
    path : '/user/:username', /* 动态路径：冒号+字符 */
    name : 'user',
    component : User
  }
]
const router = new Router({
  routes : routerList,
  mode : 'history',
});
export default router;

二、路由嵌套

在当前路由下继续跳转访问子内容

/home
    -> /home/module
        -> /home/module/function1
        -> /home/module/function2
        -> /home/module/function3
... ...

所以我们不难看出这是一个层级关系

配置方式【router/index.js】：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

/* 方式一 */
const Home = resolve => {
  require.ensure(
    ['../components/Home.vue'],
    () => resolve(require('../components/Home.vue'))
  )
}
/* 方式二 */
const About = resolve => {
  require(['../components/About.vue'],resolve);
}
/* 方式三 */
const User = () => import('../components/User.vue');

const News = () => import('../components/home/News');
const Messages = () => import('../components/home/Messages');

const routerList = [
  /* 重定向首页路由配置 */
  {
    path : '', /* 缺省值默认指向 '/' */
    redirect : '/home',
  },
  {
    path : '/home', /* 为什么这里是path不是url？ 因为完整的url还包括 项目根url（协议头 + 域名（或者IP地址） + 端口号 + 项目根名称路径（可选））  */
    name : 'home', /* 名字可以不加 */
    component : Home, /* 使用懒加载后component这里高亮显示 */
    children : [ /* 设置子路由 */
      {
        path : 'news', /* 等同于 /home + /news = /home/news 这里不需要再加斜杠了 */
        component : News
      },
      {
        path : 'messages',
        component : Messages
      }
    ]
  },
  {
    path : '/about',
    name : 'about',
    component : About
  },
  {
    path : '/user/:username', /* 动态路径：冒号+字符 */
    name : 'user',
    component : User
  }
]
const router = new Router({
  routes : routerList,
  mode : 'history',
});
export default router;

对应的目录结构尽量清晰明了

对应的给首页组件处理：

注意这里的to属性路由地址一定是写完整的！！！

<template>
  <div>
    <h3>这是首页Home组件</h3>
    <p>
      首页Home组件的内容 <br>
      <router-link to="/home/news">新闻列表</router-link>
      <router-link to="/home/messages">消息列表</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home"
}
</script>

<style scoped>

</style>

同样子组件也可以配置默认路径，实现一打开就展示某一部分的内容

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

/* 方式一 */
const Home = resolve => {
  require.ensure(
    ['../components/Home.vue'],
    () => resolve(require('../components/Home.vue'))
  )
}
/* 方式二 */
const About = resolve => {
  require(['../components/About.vue'],resolve);
}
/* 方式三 */
const User = () => import('../components/User.vue');

const News = () => import('../components/home/News');
const Messages = () => import('../components/home/Messages');

const routerList = [
  /* 重定向首页路由配置 */
  {
    path : '', /* 缺省值默认指向 '/' */
    redirect : '/home',
  },
  {
    path : '/home', /* 为什么这里是path不是url？ 因为完整的url还包括 项目根url（协议头 + 域名（或者IP地址） + 端口号 + 项目根名称路径（可选））  */
    name : 'home', /* 名字可以不加 */
    component : Home, /* 使用懒加载后component这里高亮显示 */
    children : [ /* 设置子路由 */
      {
        path : '', /* 这个缺省默认/home */
        redirect : 'news'
      },
      {
        path : 'news', /* 等同于 /home + /news = /home/news 这里不需要再加斜杠了 */
        component : News
      },
      {
        path : 'messages',
        component : Messages
      }
    ]
  },
  {
    path : '/about',
    name : 'about',
    component : About
  },
  {
    path : '/user/:username', /* 动态路径：冒号+字符 */
    name : 'user',
    component : User
  }
]
const router = new Router({
  routes : routerList,
  mode : 'history',
});
export default router;