当前位置：首页 > news >正文

web学习笔记（六十五）

news 来源：原创 2024/7/2 22:47:31

1. Hash模式和History模式

2. 导航守卫

3. 路由元信息

4.路由懒加载

1. Hash模式和History模式

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

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 falseelse {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: '/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')}