前端Vue日常工作中--Vue路由相关

前端Vue日常工作中–Vue路由相关

文章目录

  • 前端Vue日常工作中--Vue路由相关
    • 1.路由模式
    • 2.router和$route
    • 3.路由跳转
    • 4.路由守卫
    • 5.路由传参
    • 6.问题:Vue路由解决页面刷新参数丢失的问题

1.路由模式

Vue 路由模式主要有两种:哈希模式(Hash Mode)和历史模式(History Mode)。

  1. 哈希模式(Hash Mode):
    在哈希模式下,URL 中的路径会以 # 符号开头,在这种模式下,实际的路径是在 # 符号之后,而不会触发浏览器向服务器发送请求。这样可以避免浏览器刷新页面时发送请求,适用于单页应用。

    在 Vue 中,默认就是哈希模式,你不需要额外的配置,只需创建一个路由实例即可:

    import Vue from 'vue';
    import VueRouter from 'vue-router';Vue.use(VueRouter);const router = new VueRouter({mode: 'hash', // 默认就是 'hash' 模式routes: [// 路由配置]
    });
    
  2. 历史模式(History Mode):
    在历史模式下,URL 中的路径更具传统的形式,不再带有 # 符号,在这种模式下,需要服务器的支持,以确保在直接访问或刷新页面时能够正确处理路由。

    若要使用历史模式,需要配置 mode'history',并在服务器端进行相关设置。以下是一个基本的配置示例:

    import Vue from 'vue';
    import VueRouter from 'vue-router';Vue.use(VueRouter);const router = new VueRouter({mode: 'history', // 使用 'history' 模式routes: [// 路由配置]
    });
    

在 Element UI,可以在项目中使用 Element UI 的导航组件如 <el-menu><el-menu-item>,并根据不同的路由模式进行相应的配置。例如,可以在菜单项中使用 <router-link> 组件来实现导航:

<template><el-menu :default-active="activeMenu" mode="horizontal" @select="handleMenuSelect"><el-menu-item index="/home"><router-link to="/home">Home</router-link></el-menu-item><el-menu-item index="/about"><router-link to="/about">About</router-link></el-menu-item></el-menu>
</template><script>
export default {data() {return {activeMenu: '' // 用于记录当前激活的菜单项};},methods: {handleMenuSelect(index) {this.activeMenu = index;}}
}
</script>

<router-link> 组件被用于创建带有正确路由的链接,这样用户点击菜单项时就会触发路由切换。在实际项目中,可以根据具体需求配置路由模式,并使用 Element UI 或其他 UI 库提供的组件来构建用户界面。

2.router和$route

$router$route 是与路由相关的两个对象,它们分别代表了路由器和当前路由的信息。主要区别如下:

  1. $router:

    • $router 是 Vue 路由器的实例,提供了一系列导航方法,如 pushreplacego,用于在应用程序中进行路由导航。
    • $router 允许你通过编程的方式进行路由跳转,而不依赖于声明式的组件内部导航(例如 <router-link>)。
    • 可以在任何组件中通过 this.$router 访问。
  2. $route:

    • $route 是当前活动的路由对象,包含了当前路由的信息,如路径、参数、查询参数、哈希等。
    • $route 可以用于访问当前路由的各种信息,例如在组件内获取当前路径 this.$route.path,或者获取查询参数 this.$route.query
    • $route 是一个响应式对象,当路由发生变化时,相关组件会自动更新。
<template><div><p>当前: {{ $route.path }}</p><p>查询参数: {{ $route.query }}</p><el-button @click="goToAbout">Go to About</el-button></div>
</template><script>
export default {methods: {goToAbout() {// 使用 $router 进行编程式导航this.$router.push('/about');}}
}
</script>

$route.path 用于获取当前路由的路径,$route.query 用于获取查询参数。$router.push('/about') 使用 $router 对象进行编程式导航,将用户导航到 “/about” 路由。

3.路由跳转

在 Vue 中,常见的路由跳转方式包括:

  1. 声明式导航(Declarative Routing):
    使用 <router-link> 组件进行声明式的导航,该组件会自动渲染为合适的 <a> 标签,通过 to 属性指定目标路由。

    <template><router-link to="/home">Go to Home</router-link>
    </template>
    
  2. 编程式导航(Programmatic Routing):
    使用 $router 对象进行编程式导航,通常在组件内部的方法中执行。在这里,可以使用 this.$router.push() 来导航到目标路由。

    <script>
    export default {methods: {goToHome() {this.$router.push('/home');}}
    }
    </script>
    
<template><div><!-- 声明式导航 --><router-link to="/home"><el-button type="primary">Go to Home</el-button></router-link><!-- 编程式导航 --><el-button type="success" @click="goToAbout">Go to About</el-button></div>
</template><script>
export default {methods: {goToAbout() {// 使用编程式导航this.$router.push('/about');}}
}
</script>

我们使用了 Element UI 的按钮组件来触发路由的跳转。<router-link> 用于声明式导航,而 this.$router.push() 用于编程式导航。

4.路由守卫

Vue 路由守卫用于在导航过程中对路由进行控制,可以在路由跳转前、跳转后、组件渲染前等不同阶段执行一些代码逻辑。Vue 提供了全局守卫、路由独享守卫、组件内守卫等多种类型的守卫。

  1. 全局前置守卫 (beforeEach):
    在路由跳转前执行,常用于进行权限验证或全局设置。

    import router from './router';router.beforeEach((to, from, next) => {// 在此处进行权限验证或其他逻辑if (to.meta.requiresAuth && !isAuthenticated) {// 未登录,重定向到登录页next('/login');} else {// 继续路由跳转next();}
    });
    
  2. 全局解析守卫 (beforeResolve):
    在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后调用。

    router.beforeResolve((to, from, next) => {// 在此处执行解析逻辑next();
    });
    
  3. 全局后置守卫 (afterEach):
    在路由跳转后执行,常用于记录日志或进行页面埋点等操作。

    router.afterEach((to, from) => {// 在此处执行后置逻辑
    });
    
  4. 路由独享守卫 (beforeEnter):
    在单个路由配置中定义,对特定路由生效。

    const router = new VueRouter({routes: [{path: '/admin',component: Admin,beforeEnter: (to, from, next) => {// 在此处执行路由独享守卫逻辑if (isAdmin) {next();} else {next('/login');}}}]
    });
    
  5. 组件内守卫:
    在组件内部定义 beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave 方法。

    export default {beforeRouteEnter(to, from, next) {// 在组件渲染前执行next(vm => {// 可以访问实例 `vm`});},beforeRouteUpdate(to, from, next) {// 在组件复用时调用// 可以访问组件实例 `this`next();},beforeRouteLeave(to, from, next) {// 在组件离开时调用// 可以访问组件实例 `this`next();}
    };
    
router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isAuthenticated) {// 使用 Element UI 的消息框提示用户this.$message.error('请先登录');// 未登录,重定向到登录页next('/login');} else {// 继续路由跳转next();}
});

5.路由传参

  1. 路由参数

    通过在路由路径中添加参数,可以使用$route.params来访问这些参数。

    // 路由配置
    const routes = [{ path: '/user/:id', component: User }
    ];// 组件中获取参数
    this.$route.params.id
    

    Element UI:

    <!-- 使用el-link传递参数 -->
    <el-link :to="{ path: '/user/' + userId }">Go to User</el-link>
    
  2. 查询参数

    使用查询参数,可以通过$route.query来获取。

    // 路由配置
    const routes = [{ path: '/user', component: User }
    ];// 组件中获取参数
    this.$route.query.id
    

    Element UI:

    <!-- 使用el-link传递查询参数 -->
    <el-link :to="{ path: '/user', query: { id: userId }}">Go to User</el-link>
    
  3. 命名路由

    使用命名路由,可以在$route.params中直接获取。

    // 路由配置
    const routes = [{ path: '/user/:id', name: 'user', component: User }
    ];// 组件中获取参数
    this.$route.params.id
    

    Element UI:

    <!-- 使用el-link传递参数 -->
    <el-link :to="{ name: 'user', params: { id: userId }}">Go to User</el-link>
    
  4. props传参

    可以通过在路由配置中使用props来直接将参数传递给组件。

    // 路由配置
    const routes = [{ path: '/user/:id', component: User, props: true }
    ];// 组件中通过props接收参数
    props: ['id']
    

    Element UI:

    <!-- 使用el-link传递参数 -->
    <el-link :to="{ path: '/user/' + userId, props: true }">Go to User</el-link>
    

6.问题:Vue路由解决页面刷新参数丢失的问题

当在Vue应用中刷新页面时,页面的状态和参数通常会丢失,这是因为刷新页面会重新加载整个应用,导致 Vue 实例重新创建。

  1. 使用路由参数

    将页面状态信息放在路由的路径中,以便在刷新页面时能够重新获取。这样,即使刷新页面,路由参数仍然会被保留。

    // 路由配置
    const routes = [{ path: '/user/:id', component: User }
    ];// 在组件中获取参数
    this.$route.params.id
    

    Element UI 的 el-link

    <!-- 使用el-link传递参数 -->
    <el-link :to="{ path: '/user/' + userId }">Go to User</el-link>
    
  2. 使用localStorage或sessionStorage

    将页面状态信息存储在 localStoragesessionStorage 中,以便在页面刷新时检索。

    // 存储数据
    localStorage.setItem('userId', userId);// 获取数据
    const userId = localStorage.getItem('userId');
    

    在 Vue 组件的生命周期钩子中使用:

    mounted() {const userId = localStorage.getItem('userId');// 使用 userId 进行其他操作
    }
    

    使用 localStoragesessionStorage 存储的数据在页面关闭后仍然存在,需要手动清除或者通过其他方式进行管理。

  3. 使用Vuex

    如果应用状态较为复杂,可以使用 Vuex 来管理全局状态。即使页面刷新,Vuex 中的状态仍然可以被保留。

    // 在 Vuex store 中定义状态
    state: {userId: null
    }// 在组件中获取状态
    this.$store.state.userId
    

    在页面刷新后,你需要通过触发某个事件或在应用初始化时从其他地方恢复这些状态。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/591769.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GRU算法

前置知识&#xff1a;RNN&#xff0c;LSTM LSTM需要训练的参数很多&#xff0c;极消耗计算资源。GRU是一种LSTM的改进算法&#xff0c;参数更少&#xff0c;更容易训练。 它将忘记门和输入门合并成为一个单一的更新门&#xff0c;同时合并了数据单元状态和隐藏状态&#xff0…

CSS 缩减顶部动画

<template><!-- mouseenter"startAnimation" 表示在鼠标进入元素时触发 startAnimation 方法。mouseleave"stopAnimation" 表示在鼠标离开元素时触发 stopAnimation 方法。 --><!-- 容器元素 --><div class"container" mou…

c++ 变量详细解释

C 变量&#xff1a;详细解释 1. 变量声明和初始化 声明&#xff1a;告诉编译器变量的类型和名称。int number;初始化&#xff1a;为变量指定一个初始值。int number 10; // 声明并初始化2. 变量类型 基本类型&#xff1a;包括整数&#xff08;int, short, long&#xff09…

MATLAB指令

01--根据数学公式进行绘制 1.绘制连续函数 ①一元函数 t0:0.1:10; y3*t2; plot(t,y) ②一元二次函数 t0:0.1:10; yt.*t; plot(t,y) 注意此处应为点乘 ③一元3次 t0:0.1:10; yt.*t.*t; plot(t,y) ④y1/t t0:0.1:10; y1./t; plot(t,y) ⑤yexp(t) t0:0.1:10; yexp(2*t); p…

计算机基础面试题 |03.精选计算机基础面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

Python爬虫---selenium基本使用

为什么使用selenium&#xff1f; 使用urllib.request.urlopen()模拟浏览器有时候获取不到数据,所以使用selenium (1) selenium是一个用于web应用程序测试的工具 (2) selenium 测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样 (3) 支持通过各种driver (FirfoxDri…

封装、继承、多态、重载:C++中的强大特性与代码设计

这里写目录标题 封装C语言封装风格C封装 继承多态多态的实现虚函数概念&#xff1a;虚表指针overloadoverwriteoverride抽象类 重载 封装 C中的封装是一种面向对象编程的概念&#xff0c;它将数据&#xff08;成员变量&#xff09;和操作&#xff08;成员函数&#xff09;封装…

23种设计模式Python版

目录 创建型模式简单工厂模式工厂方法模式抽象工厂模式单例模式原型模式建造者模式 结构型模式适配器模式桥接模式组合模式装饰器模式外观模式享元模式代理模式 行为型模式职责链模式命令模式解释器模式迭代器模式中介者模式备忘录模式观察者模式状态模式策略模式模板方法模式访…

改进YOLO系列 | YOLOv5/v7 更换主干网络之 ResNet50/ResNet101

论文地址:https://arxiv.org/abs/1512.03385v1 更深层的神经网络更难以训练。我们提出了一个残差学习框架,以便于训练比以往使用的网络更深层的网络。我们明确地将层重构为学习相对于层输入的残差函数,而不是学习无参考的函数。我们提供了全面的实证证据,表明这些残差网络…

接口测试工具Postman接口测试图文教程

一、前言 在前后端分离开发时&#xff0c;后端工作人员完成系统接口开发后&#xff0c;需要与前端人员对接&#xff0c;测试调试接口&#xff0c;验证接口的正确性可用性。而这要求前端开发进度和后端进度保持基本一致&#xff0c;任何一方的进度跟不上&#xff0c;都无法及时完…

APP UI自动化测试常见面试题,或许有用呢~

1.Android APP 内存不足时&#xff0c;如何获得内存&#xff1f; 系统优先结束被挂起&#xff08;暂停&#xff09;的进程&#xff0c;释放内存。 2.APP 测试常见问题有哪些&#xff1f;原因有哪些&#xff1f; 常见的有 crash、ANR&#xff08;应用无响应、卡死&#xff09…

STM32G030F6P6读写flash失败问题(HAL)

STM32G030是F0系列的升级版&#xff0c;其在性能上比F0要好很多&#xff0c;具体G0参数如下&#xff1a; 最开始做项目选用的单片机是STM32F030F4P6&#xff0c;但是在后期使用中发现&#xff0c;我的FLASH&#xff08;16K&#xff09;不够用了&#xff0c;就选择了STM32G030F6…

【Matlab】LSTM长短期记忆神经网络时序预测算法(附代码)

资源下载&#xff1a; https://download.csdn.net/download/vvoennvv/88688439 一&#xff0c;概述 LSTM&#xff08;Long Short-Term Memory&#xff09;是一种常用的循环神经网络&#xff08;Recurrent Neural Network&#xff0c;RNN&#xff09;结构&#xff0c;由于其对于…

java常见面试题:什么是泛型?泛型有哪些应用场景?

泛型是程序设计语言的一种特性&#xff0c;它允许程序员在强类型程序设计语言中编写代码时定义一些可变部分&#xff0c;那些部分在使用前必须作出指明。 泛型的应用场景主要包括以下几个方面&#xff1a; 集合类和数据结构&#xff1a;泛型最常见的用途是在集合类&#xff0…

ros2基础学习13 DDS 通信得学习

ROS2中最为重大的变化——DDS&#xff0c;我们在前边课程中学习的话题、服务、动作&#xff0c;他们底层通信的具体实现过程&#xff0c;都是靠DDS来完成的&#xff0c;它相当于是ROS机器人系统中的神经网络。 通信模型 DDS的核心是通信&#xff0c;能够实现通信的模型和软件框…

科技云报道:2024年六大科技趋势前瞻,最热门的技术都在这里了!

科技云报道原创。 物之生也&#xff0c;若骤若驰&#xff0c;无动而不变&#xff0c;无时而不移。 技术创新的步伐丝毫没有放缓的迹象&#xff0c;在这个日新月异的时代&#xff0c;科技创新在改变人们生活、推动社会进步方面扮演着关键的角色。2024年有望成为又一个开创性的…

不停止业务的情况下优化 Elasticsearch Reindex

在使用 Elasticsearch 时,我们总有需要修改索引映射的时候,这时我们只能进行 _reindex。事实上,这是一个相当昂贵的操作,因为根据数据量和分片数量,完整复制一个索引可能需要几个小时。 花费的时间不是大问题,但更严重的是,它会影响生产环境的性能甚至功能。 相信大家…

高效管理文件夹:使用重命名进行文件夹名称大小写转换的技巧

在计算机管理中&#xff0c;文件夹名称的大小写规范是一个经常被忽视的细节。然而&#xff0c;文件夹名称的大小写有时可能会影响工作流程&#xff0c;例如在某些文件搜索或识别过程中。掌握文件夹名称大小写转换的技巧&#xff0c;可以更高效地管理文件夹。现在一起来看看云炫…

yolov8 速度测试

yolov8 速度测试 T4显卡 1&#xff0c;1280 1280 yolov8x6 推理速度 Speed: 7.4ms preprocess, 156.8ms inference, 1.1ms postprocess per image at shape (1, 3, 960, 1280) 2.fp16打开 0: 960x1280 1 bj_bpmh, 159.6ms Speed: 7.5ms preprocess, 159.6ms inference, 1.2m…

分布式定时任务Xxl_Job详细使用手册

看了很多网上的版本&#xff0c;思路描述的都不是很清晰&#xff0c;都只是几步操作就完成了&#xff0c;看效果&#xff0c;导致容易走入弯路&#xff08;不排除是自己理解能力把&#xff09;&#xff0c;最开始以为是把admin模块集成到项目&#xff0c;后来测试了会&#xff…