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 來響應這個變化 。