web学习笔记（六十五）-CSDN博客

本文链接：https://blog.csdn.net/shan33__/article/details/139510904

1. Hash模式和History模式

Hash模式（哈希模式）和History模式（历史模式）是匹配路由的两种模式，一般默认配置History模式，可以在index.js页面中将路由匹配的模式换为Hash模式

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
// 使用哈希模式需要导入createWebHashHistory
import HomeView from '../views/HomeView.vue'

const router = createRouter({
    // 历史模式
    history: createWebHistory(import.meta.env.BASE_URL),
    // 哈希模式
    history: createWebHashHistory(import.meta.env.BASE_URL),
 routes: [
   {
            path: '/router',
            name: 'router',
            // route level code-splitting
            // this generates a separate chunk (About.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import('../views/routerview.vue')
        }
    
    ]
});

哈希模式和历史模式的区别:

哈希模式下地址栏中有#号标识，历史模式下则没有#号标识，但两者的传参方式是一样的
在项目打包之前，我们在开发者模式下是观察不到哈希模式和历史模式的区别的，但是当项目打包后我们会发现当我们尝试进入一个不存在的页面时，历史模式会向后端发送请求，因为浏览器没有匹配到路由组件，所以向服务器发送请求页面去了，这种情况下控制台会出现404报错，要想让控制台不报错得加后端配置，如果服务器不存在这个地址就把原页面返回，不要出现404错误，而哈希模式就不会出现这个问题，因为他有#表示，浏览器不会当成url向服务器请求的。

2. 导航守卫

导航守卫就是路由跳转中的一个拦截器。全局前置守卫：所有路由跳转前都会先经过这个守卫的拦截。beforeEach内部返回false表示不同意跳转；返回true同意跳转。

router.beforeEach((to, from,next) => {

    // to：目的地页面路由 from:当前要切换的路由

    // 返回false以取消导航

    // 一般需要授权验证的页面才需要拦截，其他页面直接放行。

    if (to.path == '/about') {

        if (localStorage.getItem('token')) next();//已登录，允许跳转

        else {

            console.log('请先登录');

            next(`/login?target=${to.path}`)//跳转登录页面

        }

    }

    // return false

    else {

        next();//使用了next参数就不再使用返回值true/false来决定是否跳转。因为next()不带参数等价于return true,允许跳转

    }

    // 保证任意条件下next只执行一次  

})

3. 路由元信息

在 Vue Router 中，路由元信息（Route Meta Fields）是一种用于给路由添加额外信息的方式。通过路由元信息，我们可以为每个路由定义一些自定义的数据，这些数据可以在路由导航守卫和组件中访问，从而实现更灵活的路由控制和处理。我们可以将自定义的数据写道 meta里面。

 routes: [
        {
            path: '/',
            name: 'home',
            component: HomeView,
            // meta自定义路由参数只能写在这里面
            
            meta: {
                // 路由元信息，主要是给路由设置自定义参数。
                isAuth:true,
            }
        }
    ]

可以用来认证进入该页面是否需要登录，给需要登陆的页面都加上isAuth，然后在导航守卫中通过isAuth来判断。

4.路由懒加载

主要用来优化代码体积，当我们使用npm run build命令将项目打包放到服务器时，使用路由懒加载来优化代码体积可以提高用户的体验，

之前我们导入组件使用的都是同步导入的方式，在首次加载页面时，这些组件内容都一并被浏览器加载了，当入口js文件体积变大时，浏览器加载和解析的速度就会变慢，首屏加载时间就会延长，用户体验不好，可能会长时间处于白屏阶段。

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
    // 历史模式
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            name: 'home',
            component: HomeView,
            // meta自定义路由参数只能写在这里面
  
        }
    ]
});


export default router

但是现在我们可以使用路由的懒加载来导入组件，将每一个组件单独打包一个js/css文件，当用户访问路由了，再加载对应的 js文件，减轻了入口js的代码体积，解析和加载速度就快了，首屏加载事件也缩短了，从而提高用户的体验。

  {
    path: '/login',
    name: 'login',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "login" */ '../views/login.vue')
      ,
      
  }

/* webpackChunkName: "login" */ 标识打包后对应的js和css文件的名字，可以自行修改合适的名字。