vue的單頁面（SPA）專案,必然涉及路由按需的問題。

以前我們是這麼做的

//require.ensure是webpack裡面的，這樣做會將單獨拉出來作為一個chunk檔案

const Login = r => require.ensure( [],() => r (require('../component/Login.vue')));

但現在vue-router的官網看看，推薦這種方式：

//vue非同步元件和webpack的【程式碼分塊點】功能結合，實現了按需載入

const App = () => import('../component/Login.vue');

可是，很多情況下，我們這麼寫npm run dev控制檯直接報錯，這是為什麼呢？

Module build failed: SyntaxError: Unexpected token

原來是import這兒報錯了，這就需要babel的外掛了，vue-router官網上有一段提示：

如果您使用的是 Babel，你將需要新增 syntax-dynamic-import 外掛，才能使 Babel 可以正確地解析語法。

至此，問題全部解決了。

如果使用vue-cli生成專案，很可能在babel-loader沒有配置上面的外掛，這時需要我們自己去安裝此外掛：

cnpm install babel-plugin-syntax-dynamic-import --save-dev

然後修改webpack的js的loader部分：

{
test: /\.js$/,loader:'babel-loader',options:{
plugins:['syntax-dynamic-import']
},},　

增加了option選項，至此，能識別我們：

const App = () => import('../component/Login.vue');

的語法了，頁面出來了：

在打包的時候，發現我們如果只是這麼寫，出現的chunk包名字都是亂的，如果我們指定命名，該怎麼辦呢？webpack3提供了Magic Comments（魔法註釋）

const App = () => import(/* webpackChunkName:'login'*/ '../component/Login.vue');

這樣我們就為打包出來的chunk指定一個名字，最終生成login.js的chunk包。

補充知識：Vue根據是否授權，跳轉不同的路由（vue-router動態路由）

功能點：專案一執行需要先請求後臺，根據後臺返回結果跳轉對應路由,如果使用者已經授權跳轉首頁，如果使用者沒有授權，跳轉授權頁面進行授權。

實現程式碼如下：

router資料夾中的index.js

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
let router =new Router({
 routes:[]
});
//全域性路由鉤子函式
router.beforeEach((to,from,next)=>{
 //不加這個判斷，路由會陷入死迴圈重複新增路由
 if(!to.name){
 alert("請上傳有效的License檔案，以正常使用系統功能");
 next("/licenseManage");
 }else{
 next();
 }
})
export default router;

router資料夾的accessRouters.js(定義好不同的路由)

import index from "@/views/index";
export default{
 //已授權路由列表
 hasAccessRouters:[
 {
  path:"/",name:"index",component:index,redirect:"preIntegrationTest",children:[
  {
   path:"/preIntegrationTest",name:"preIntegrationTest",components:{
   listPage:resolve =>{ 
    require(["@/views/pages/preIntegrationTest"],resolve)
   }
   },props:{}
  },{
   path:"/about",name:"about",components:{
   listPage:resolve =>{ 
    require(["@/views/pages/about"],{
   path:"/help",name:"help",components:{
   listPage:resolve =>{ 
    require(["@/views/pages/help"],props:{}
  }
  }
  ],//沒有授權的路由列表
  noAccessRouters:[
  {
   path:"/",redirect:"licenseManage",children:[
   {
    path:"/licenseManage",name:"licenseManage",components:{
    listPage:resolve =>{ 
     require(["@/views/systemSetting/licenseManage"],resolve)
    }
    },props:{}
   }
  }
  ]
 }
 ]
}

store中的index.js定義倉庫中的變數

import Vue from "vue";
import Vuex from "vuex";
import mutations from "./mutations";
import actions from "actions";
Vue.use(Vuex);
const store = new Vuex.store({
 state:{
 axios:axios.create({baseURL:"",transformRequest:[]}),authorized:false
 },getters:{},mutations,actions
});
export default store;

mutation.js定義改變狀態庫中authorized的值的方法並載入動態路由

import router from "@/router/index";
import accessRouters from "@/router/accessRouters";
const mutations={
 setAuthorized(state,payload){
 if(payload){
  //已授權
  //載入路由為已授權定義的路由列表並跳轉/preIntegrationTest
  router.addRoutes(accessRouters.hasAccessRouters);
  let url=location.hash.substring(1)==='/'?'/preIntegrationTest':location.hash.substring(1);
  router.push('url')；
 }else{
  //沒有授權,跳轉授權頁面
  router.push('/licenseManage')；
 }
 //更改狀態值
 state.authorized=payload;
 }
}
export default mutations;

action.js請求後臺介面返回結果，賦值給store狀態庫中的變數

const actions={
 addInterceptors({state,commit}){
 //響應攔截--配置請求回來的資訊
 state.axios.interceptors.response.use(
  function(response){
  // 處理響應資料
  return response
  },function(error){
  if(error.response.status === 403){
   commit("setAuthorized",false)
  }
  //處理響應失敗
  return Promise.reject(error)
  }
 )
 },setAuthorized({dispatch,state}){
 dispatch("addInterceptors");
 state.axios.get('url****').then(function(response){
  if(response.data.code === "1"){
  state.authorized = true;
  router.addRoutes(accessRouters.hasAccessRouters);
  let url=location.hash.substring(1)==="/"?"/preIntegrationTest":location.hash.substring(1);
  router.push(url);
   
  }else{
  //沒有授權 跳轉授權頁面
  state.authorized = false;
  router.addRoutes(accessRouters.noAccessRouters);
  router.push("/licenseManage");
  }
  
 }).catch(function(error){
  console.log(error)
  //沒有授權 跳轉授權頁面
  state.authorized = false;
  router.addRoutes(accessRouters.noAccessRouters);
  router.push("/licenseManage");
 })
 }
}
export default actions;

以上這篇vue-router 按需載入 component: () => import() 報錯的解決就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。