1. vue-cli3里用vue-router居然不能懒加载(是我孤陋寡闻了),要用懒加载的话需要关闭prefetch,想要预加载的可以使用webpack内联指令单独打开prefetch。
prefetch的作用是什么呢,在页面加载完成后利用空闲时间预加载需要的内容。会比较消耗带宽,一般移动端会关掉。
关闭prefetch:
//vue.config.js里
module.exports = {
chainWebpack: config =>{
config.plugins.delete('prefetch')
}
}
单独为某个组件打开prefetch:
//router.js里懒加载的时候
compontent: ()=> import (/*webpachPrefetch: true*/,'@/xx/xx')
同时,这里也可以使用另外一个webpack内联指令把某个组件或者多个组件提出来放到单独的xx.[hash].js里,提高首次加载的速度:
component: ()=> import (/*webpackChunkName: 'xx'*/ '@/xx/xx')
2. vue-router的4.几版本+vue3的写法变化
首先就是new vueRouter改为createRouter,mode改为history,值改为方法:
"history"
:createWebHistory()
"hash"
:createWebHashHistory()
"abstract"
:createMemoryHistory()
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'index',
component: ()=>
import ('@/pages/index')
},
{
path: '/my',
name: 'my',
component: ()=>
import ('@/pages/my')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes: routes,
})
export default router
然后把原本的Vue.use(router)移动到main.js里,先初始化再use:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
9敏这里还出了个小(大)插曲,我按照官网给出的正确格式写的,但是uc浏览器(用uc是因为之前谷歌的cookie跨域带不上,很离谱,改了samesite那两个设置也不行)一直报这个错:
给我整的是非常抓心挠肝,到处查到处问也没搞明白,直到我忽然换了浏览器。。。 就。。。没事了???
纯纯一个大无语就是说