在vue中,不使用懶載入的情況下,我們打包後的dist中會有2個資料夾.分別用於存放css 和 js,
在js中,會生成3個js檔案: *代表生成的數字字母等
2.manifest.*******.js : 這個js是用來存放對我們的js**等提供底層支撐的**
3.vendor.********.js : 這個js是用來存放,第三方的**的 ,如:vue等
那麼如何解決呢?
懶載入:在用的時候再去載入
我們應該使用路由的懶載入.什麼意思呢?也就是我們每有乙個路由,那麼就生成乙個單獨的js檔案;
之前我們採用comment.js或者es6的方式匯入路由檔案. 如: import home from '../components/home'
現在,使用懶載入的方式進行匯入: const home = () => import('../components/home')
這時,再進行打包,我們去dist檔案中的js檔案裡就可看到在原有的基礎上,又多出了新的js檔案.
以上就是個人對懶載入的理解
登入功能，路由的導航守衛
//to: 將要去往的頁面 from 從哪個頁面開始 next 放行函式-----------------》 next（）=== 直接放行； next('/login') === 強制跳轉
router.beforeach((to,from,next)=>{
//如果使用者訪問的登入頁，就直接放行
if(to.path === '/login') return next();
//獲取token
const tokens = window.sessionstorage.getitem('token');
//如果token為空，那麼強制跳轉到登入頁
if(!tokens) return next('/login')
//有token就直接放行
next();
vue 路由 7 導航守衛》
導航守衛 1 什麼是導航守衛?1 vue router提供的導航守衛主要用來監聽路由的進入和離開。2 vue router提供了beforeeach和aftereach的函式,它們會在路由即將改變前和改變後觸發。2 為什麼要用導航守衛？我們來考慮乙個需求 頁面跳轉時如何改變網頁的標題呢?網頁標題是通...
vue路由懶載入
import vue from vue import vuerouter from vue router vue.use vuerouter var router new vuerouter routes name 登陸 path component resolve require.ensure r...
vue路由懶載入
方法一 resolve 這一種方法較常見。它主要是使用了resolve的非同步機制，用require代替了import,實現按需載入，下面是 示例 import vue from vue import router from vue router import helloworld from com...