vue3学习笔记—vue-router（3）

weixin_45888650

已于 2023-03-12 17:52:18 修改

阅读量152

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 学习前端

于 2023-03-12 17:42:57 首次发布

本文链接：https://blog.csdn.net/weixin_45888650/article/details/129476499

本文介绍了Vue3中vue-router的两种历史记录模式——Hash模式和HTML5模式，并详细讲解了路由守卫的概念，包括全局守卫、路由独享守卫和组件内守卫。此外，还提到了路由懒加载的优势，它可以在使用时按需加载，提高应用的加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不同的历史记录模式

Hash 模式用的是 createWebHashHistory()，不会发送请求到服务器，页面不会刷新，提高性能

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
    // hash 模式
    history: createWebHashHistory(),
    routes, // 'routes: routes' 的缩写
})

HTML5模式用的是 createWebHistory()

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
    //history模式
    history:createWebHistory(),
    routes, // 'routes: routes' 的缩写
})

两种模式的区别就在于页面的URL中有无“#”

路由守卫

to，跳转后的页面

from，跳转前的页面

全局守卫

作用于页面全部路由

router.beforeEach((to,from,next)=>{
    console.log(to);
    console.log(from);
    next()//通行证
})

每路守卫（路由独享）

控制一个路由

    {
        path: '/about', 
        component: About,
        //每路守卫（路由独享）
        beforeEnter: (to, from,next) => {//token
            console.log(to);
            console.log(from);
            if(123 == 123){
                next()
            }
        }
    },

组件内的守卫

<script>
export default {
    data() {
        return {
            age: 18
        }
    },

    beforeRouteEnter(to, from, next) {//拿不到实例对象，通过next回调函数获取
        console.log(to);
        console.log(from);
        next((vm) => {
            console.log(vm.age);
        })

        console.log("路由进去组件之前");
    },

    beforeRouteUpdate() {
        console.log("路由更新组件之前");
    },

    beforeRouteLeave() {
        console.log("路由离开组件之前");
    },
}
</script>

路由懒加载

使用时才会加载，不会和静态导入一样主动加载全部，相比静态导入，速度会更加快。

//静态导入
// import Home from '../views/Home.vue'

//路由懒加载，用到的时候再加载
const Home=()=>import('../views/Home.vue')