vue-cli3路由相关采坑记

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那两个设置也不行）一直报这个错：

给我整的是非常抓心挠肝，到处查到处问也没搞明白，直到我忽然换了浏览器。。。 就。。。没事了？？？

纯纯一个大无语就是说