web学习笔记(六十五)

目录

1. Hash模式和History模式

2. 导航守卫

3. 路由元信息

4.路由懒加载


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文件的名字,可以自行修改合适的名字。 

  • 13
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值