Vue -- 动态加载组件的四种方式

动态加载组件的四种方式：

1、使用import导入组件，可以获取到组件

var name = 'system';
import myComponent from '@/pages/components/' + name;
var route={
    name: name,
    component: myComponent
}

2、使用import导入组件，直接将组件赋值给componet

var name = 'system';
var route={
    name: name,
    component: () => import('../components/' + name + '.vue'); // 或者先赋值给变量 var myComponent =() => import('../components/' + name + '.vue');
}

3、使用require 导入组件，可以获取到组件

var name = 'system';
var myComponent = resolve => require.ensure([], () => resolve(require('../components/' + name + '.vue')));
var route={
    name: name,
    component: myComponent
}

4、使用require 导入组件，直接将组件赋值给componet

var name = 'system';
var route={
    name: name,
    component(resolve) {
        require(['../components/' + name + '.vue'], resolve)
    }
}

作者：Gersy
链接：https://www.jianshu.com/p/20591ad64d2e
来源：简书

vue路由跳转push，replace，go
this.$router.replace({ path: "/subpagest" });//不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录;
this.$router.push({ path: "/subpagest" });//会向 history 栈添加一个新的记录;
this.$router.go(-1);//这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步。
提示：如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，可以使用 beforeRouteUpdate 来响应这个变化 。