vue router动态路由，路由懒加载

懒加载

在router中，Home和about的两种不同引入方式，About就是懒加载。

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];
const router = new VueRouter({
  routes
});
export default router;

有什么实际区别：

1. 在第一次页面的时候未用到about页面：app.js的大小是203B
2. 此时进去Home路由，js无新增，再进入About路由，会加载新的js文件

注：把about的引入方式变成与home相同，此时再重新打开页面
会发现：app.js的大小(即size)变大了，这就是懒加载的变化

动态路由

动态路由可通过router提供的api : addRoute来实现

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Hello from "../views/Hello.vue";
Vue.use(VueRouter);
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];
const routeMore = [
	{
		path: '/hello'
		component: Hello
	}
]
const router = new VueRouter({
  routes
});
export default router;

比如在登陆页面：login.vue

import { routeMore } from './../router'

method：{
	async login () {
		// 登陆成功就添加路由，其实权限也可通过addRoute()来实现
		const res = await this.$api.login()
		if(res.success){
			this.$router.addRoute(routeMore)
		}
	}
}