WEB前端15-Router路由

Vue2-router路由

在使用Vue.js构建现代单页面应用程序(SPA)时,路由管理是至关重要的一部分。Vue Router 是 Vue.js 官方的路由管理器,它允许你在应用程序中实现基于组件的页面导航。本文将介绍Vue Router的基本概念和用法,帮助你快速上手Vue.js的路由管理。

什么是路由?

路由在Web开发中指的是确定用户在页面之间导航的机制。在传统的多页面应用中,每次点击链接时浏览器都会向服务器请求一个新的页面。而在单页面应用(SPA)中,所有的页面加载和切换都是在客户端完成的,页面内容通过JavaScript动态更新,而不会重新请求整个页面。

Vue Router 是 Vue.js 官方提供的路由管理器。它和Vue.js核心深度集成,允许你通过简单的配置,将组件映射到路由,然后在应用中进行导航。

安装和基本用法

安装Vue Router:

npm install vue-router
1.配置路由
  • 编写路由核心js文件(静态路由配置)

image-20240801113220940

//静态导入是将所有组件的 js 代码打包到一起,如果组件非常多,打包后的 js 文件会很大,影响页面加载速度
import Vue from 'vue'
import VueRouter from 'vue-router'
import View1 from '@/views/1.vue'
import View2 from '@/views/2.vue'
import View3 from '@/views/3.vue'Vue.use(VueRouter)const routes = [{path: "/",component: View1},{path: "/login",component: View2},{path: "/404",component: View3}
]const router = new VueRouter({routes
})export default router
  • 编写路由核心js文件(动态路由配置)
//动态导入是将组件的 js 代码放入独立的文件,用到时才加载
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: "/",component: () => import('@/views/2.vue')},{path: "/login",component: () => import('@/views/1.vue')},{path: "/404",component: () => import('@/views/3.vue')}
]const router = new VueRouter({routes
})export default router
  • main.js引入路由

image-20240802093851150

  • 在根组件中显示路由
<template><div class="all"><router-view></router-view></div>
</template>

其中 <router-view> 起到占位作用,改变路径后,这个路径对应的视图组件就会占据 <router-view> 的位置,替换掉它之前的内容

2.嵌套路由

嵌套路由是指在一个页面路由中包含另一个页面路由的技术。这种技术允许我们在一个父路由内部定义子路由,这些子路由可以在父路由对应的组件中显示,从而形成页面的层级结构。这种层级结构对于复杂的应用程序特别有用,它能够帮助我们模块化地管理和组织页面内容。

  • 通过children属性指定要嵌套的路由:

children属性是一个数组,里面存放要映射的对象

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: "/",component: () => import('@/views/2.vue'),redirect: "/c/p1",children: [{path: "c/p1",component: () => import('@/views/p1.vue')},{path: "c/p2",component: () => import('@/views/p2.vue')},{path: "c/p3",component: () => import('@/views/p3.vue')},]},{path: "/login",component: () => import('@/views/1.vue')},{path: "/404",component: () => import('@/views/3.vue')},{path: "*",redirect: "/404"}
]const router = new VueRouter({routes
})export default router
  • 通过<router-view>标签进行路由的展示
<template><div><router-view></router-view></div>
</template>
3.路由跳转
  • 路由重定向

同JavaWeb中的重定向相似,以新路径请求path资源

{path: "*",redirect: "/404"
}
  • <router-link>标签实现跳转

相当于超链接进行资源的跳转,通过to属性指定要跳转的资源路径

<router-link class="router-link" to="/c/p1">P1</router-link><router-link class="router-link" to="/c/p2">P2</router-link><router-link class="router-link" to="/c/p3">P3</router-link>
  • 路由对象通过push()方法实现跳转

通过获取路由对象,调用push方法将要跳转的资源路径进行传达,实现资源跳转

const options = {methods: {jump(url) {this.$router.push(url);}},
};
  • 路由结合Element UI菜单导航

通过router和index属性,可以实现菜单导航的跳转

<el-aside width="200px"><el-menu router background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"><el-submenu><span slot="title"><i class="el-icon-user-solid"></i>菜单一</span><el-menu-item index="/c/p1">子项1</el-menu-item><el-menu-item index="/c/p2">子项2</el-menu-item><el-menu-item index="/c/p3">子项3</el-menu-item></el-submenu><el-menu-item><span slot="title"><i class="el-icon-picture"></i>菜单二</span></el-menu-item><el-menu-item><span slot="title"><i class="el-icon-s-platform"></i>菜单三</span></el-menu-item></el-menu>
</el-aside>
4.动态路由

动态路由是指根据不同的参数加载不同的路由内容。在Vue Router中,动态路由通常通过在路由路径中使用参数来实现。下面以不同用户身份返回不同的目录访问权限,动态加载路由

  • 前端登录环境准备
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: "/",name: "c",component: () => import('@/views/2.vue'),    },{path: "/login",component: () => import('@/views/1.vue')},{path: "/404",component: () => import('@/views/3.vue')},{path: "*",redirect: "/404"}
]const router = new VueRouter({routes
})export default router
<template><div class="login"><h1>登录页面</h1><el-input v-model="username" placeholder="请输入用户名" size="mini"></el-input><el-button type="primary" size="mini" @click="login">登录</el-button></div>
</template><script>
import axios from "axios";const options = {data() {return {username:""}},methods: {async login() {const response = await axios.get(`/api/login?username=${this.username}`);console.log(response.data)}},
};export default options;
</script><style scoped>
.login {text-align: center;background: greenyellow;width: auto;height: 100vh;
}.el-input {width: 200px;margin-right: 20px;
}
</style>
  • 后端SQL解释

image-20240802172715382

  • 添加动态路由
<template><div class="login"><h1>登录页面</h1><el-inputv-model="username"placeholder="请输入用户名"size="mini"></el-input><el-button type="primary" size="mini" @click="login">登录</el-button></div>
</template><script>
import axios from "axios";
const options = {data() {return {username: "",};},methods: {async login() {const response = await axios.get(`/api/login?username=${this.username}`);const array = response.data;//addRoutes() 参数1:父路由对象名字  参数2:路由对象for (const { id, path, component } of array) {if (component !== null) {this.$router.addRoutes("c", {path: path,name: id,component: () => import(`@/views/${component}`),});}}},},
};export default options;
</script><style scoped>
.login {text-align: center;background: greenyellow;width: auto;height: 100vh;
}.el-input {width: 200px;margin-right: 20px;
}
</style>

image-20240802174109531

  • 重置路由

原因:因为每次在动态加载路由的时候只是简单的对路由叠加,这就达不到对路由的动态控制,因此在每次动态添加路由时要重置路由对象,在之前的基础上添加路由,这样才可以达到不同用户权限获得不同的路由权限

//在main.js中添加如下代码
export function resetRouter() {router.matcher = new VueRouter({ routes }).matcher
}//重建新的路由对象代替旧的路由对象,matcher属性是获得路由的内容
  • 页面刷新与路由

页面刷新后,会导致动态添加的路由失效,解决方法是将路由数据存入 sessionStorage

methods: {async login() {       resetRouter(); // 重置路由     const resp = await axios.get(`/api/menu/${this.username}`)const array = resp.data;// localStorage     即使浏览器关闭,存储的数据仍在// sessionStorage   以标签页为单位,关闭标签页时,数据被清除sessionStorage.setItem('serverRoutes', JSON.stringify(array))addServerRoutes(array); // 动态添加路由this.$router.push('/');}
}

页面刷新,重新创建路由对象时,从 sessionStorage 里恢复路由数据

const router = new VueRouter({routes
})// 从 sessionStorage 中恢复路由数据
const serverRoutes = sessionStorage.getItem('serverRoutes');
if(serverRoutes) {const array = JSON.parse(serverRoutes);addServerRoutes(array) // 动态添加路由
}

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

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

相关文章

LSTM与GNN强强结合!全新架构带来10倍推理速度提升

今天来推荐一个深度学习领域很有创新性的研究方向&#xff1a;LSTM结合GNN。 GNN擅长处理图数据关系和特征&#xff0c;而LSTM擅长处理时间序列数据及长期依赖关系。通过将两者结合&#xff0c;我们可以有效提升时间序列预测的准确性和效率&#xff0c;尤其是在处理空间和时间…

vue配置多个环境变量ENV【收藏版】

vue配置多个环境变量 1. 创建环境变量文件 在你的Vue项目根目录下&#xff0c;你可以创建以下环境变量文件&#xff1a; .env&#xff1a;所有环境都会加载的通用变量。 .env.local&#xff1a;本地覆盖&#xff0c;不会被git跟踪。 .env.[mode]&#xff1a;只有指定模式才会…

光伏气象仿真系统有什么优势?

光伏气象仿真系统作为这一领域的核心工具&#xff0c;凭借其独特的优势&#xff0c;正逐步成为行业标配。本文将围绕数据可靠性、功能齐全性、海外布局支持、系统开放性以及合作方式灵活性五个方面&#xff0c;深入探讨光伏气象仿真系统的显著优势。 1.数据可靠&#xff1a;权威…

Java中的Heap(堆)(如果想知道Java中有关堆的知识点,那么只看这一篇就足够了!)

前言&#xff1a;&#xff08;Heap&#xff09;是一种特殊的完全二叉树&#xff0c;它在诸多算法中有着广泛的应用&#xff0c;本文将详细介绍Java中的堆。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客 先让我们看一下本文大…

微信小程序-获取手机号:HttpClientErrorException: 412 Precondition Failed: [no body]

问题&#xff1a; 412 异常就是你的请求参数获取请求头与服务器的不符&#xff0c;缺少请求体&#xff01; 我的问题&#xff1a; 我这里获取微信手机号的时候突然给我报错142&#xff0c;但是代码用的是原来的代码&#xff0c;换了一个框架就噶了&#xff01; 排查问题&am…

Springboot手工艺品交易平台—计算机毕业设计源码11541

摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对手工艺品交易平台等问题&#xff0c;对手工…

【MySQL进阶】事务隔离级别 MVCC

目录 MySQL事务隔离级别 1. 读未提交&#xff08;Read Uncommitted&#xff09; 2. 读已提交&#xff08;Read Committed&#xff09; 3. 可重复读&#xff08;Repeatable Read&#xff09;(默认隔离级别) 4. 串行化&#xff08;Serializable&#xff09; 表格总结 MVCC …

抖音爬虫-批量下载主页作品

使用说明 config.ini是配置文件&#xff0c;可配置文件名规则、下载视频图文音乐等。 DownloadList.txt是批量下载清单&#xff0c;可配置批量下载类型和地址。 打开软件&#xff0c;选择对应的功能&#xff0c;第一次扫码登录&#xff08;后续可自动加载cookie登录&#xff…

揭秘循环购模式:消费即收益

大家好&#xff0c;我是你们的电商策略顾问吴军。今天&#xff0c;我将带大家深入探索一种别开生面的商业模式——循环购模式。这种模式究竟有何魅力&#xff0c;能让消费者在享受购物乐趣的同时&#xff0c;还能获得额外的收益&#xff1f;更有趣的是&#xff0c;一些商家通过…

区块链软硬件协同,做产业数字化转型的“安全官” |《超话区块链》直播预告

今年的两会政府工作报告提出&#xff1a;“产业的数字化&#xff08;行业数字化转型&#xff09;是发展新质生产力的核心&#xff0c;是推动产业升级实现高质量发展的关键。”全面推进产业数字化&#xff0c;需要技术创新与产业应用深入协同&#xff1b;立足可持续发展的长远目…

Java面试八股之简述spring boot的目录结构

简述spring boot的目录结构 Spring Boot 项目遵循标准的 Maven 或 Gradle 项目布局&#xff0c;并且有一些约定的目录用于组织不同的项目组件。下面是一个典型的 Spring Boot 项目目录结构&#xff1a; src/main/java&#xff1a;包含所有的 Java 源代码&#xff0c;通常按包组…

OpenCV仿射变换实现图像扭曲与旋转

目录 1. 仿射变换 2. 仿射变换的求解 3. 代码实现 3.1 图像扭曲 3.2 图像旋转 参考内容 1. 仿射变换 仿射变换是一种可以表达为乘以一个矩阵&#xff08;线性变换&#xff09;再加上一个向量&#xff08;平移&#xff09;的变换。在几何中&#xff0c;就是将一个向量空间…

Hive环境搭建(Mysql数据库)

【实验目的】 1) 了解hive的作用 2) 熟练hive的配置过程&#xff08;Mysql数据库&#xff09; 【实验原理】 Hive工具中默认使用的是derby数据库&#xff0c;该数据库使用简单&#xff0c;操作灵活&#xff0c;但是存在一定的局限性&#xff0c;hive支持使用第三方数据库&…

Umi-OCR:功能强大且易于使用的本地照片识别软件

Umi-OCR是一款开源且免费的离线OCR&#xff08;光学字符识别&#xff09;软件&#xff0c;可让您轻松从照片中提取文本。它支持多种语言&#xff0c;并具有许多其他功能使其成为照片识别任务的绝佳选择。 Umi-OCR的优势 离线操作&#xff1a; Umi-OCR无需互联网连接即可工作&…

html+css 实现文字滚动的按钮

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享htmlcss 绚丽效果&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 文…

手摸手教你前端和后端是如何实现导出 Excel 的?

前言 大家好呀&#xff0c;我是雪荷。在上篇文章&#xff08;EasyExcel 初使用—— Java 实现多种写入 Excel 功能-CSDN博客&#xff09;中给大家介绍了 Java 是如何写入 Excel 的&#xff0c;那么这篇算是对上篇文章的拓展&#xff0c;主要介绍前端和后端分别是如何导出数据至…

代码随想录训练营 Day18打卡 二叉树 part06 530. 二叉搜索树的最小绝对差 501. 二叉搜索树中的众数 236. 二叉树的最近公共祖先

代码随想录训练营 Day18打卡 二叉树 part06 一、 力扣530. 二叉搜索树的最小绝对差 给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数&#xff0c;其数值等于两值之差的绝对值。 示例 &#xff1a; 输入&#xff1a; …

spring boot + vue3 接入钉钉实现扫码登录

1&#xff1a;准备工作 1.1&#xff1a;进入钉钉开放平台创建开发者应用。应用创建和类型介绍&#xff0c;参考下方。 应用类型介绍 - 钉钉开放平台 (dingtalk.com) 应用能力介绍 - 钉钉开放平台 (dingtalk.com) 扫码登录第三方网站 - 钉钉开放平台 (dingtalk.com) 1.2&…

KaiwuDB 产品总监李月飞:让中国物联网用上放心的数据库产品

​2024年7月17日&#xff0c;KaiwuDB 产品总监李月飞受邀于 2024 可信数据库发展大会“能源与政务数据库应用创新”分论坛发表演讲。以下是李月飞主题演讲《深耕数据良田&#xff0c;KaiwuDB 洞见能源产业数字新生力》精华实录。 数据&#xff0c;给能源变革带来新的可能 众所…

TypeScript 简介

文档 typeScript官网中文文档&#xff1a;https://www.tslang.cn/index.html中文文档(简洁点)&#xff1a;https://typescript.bootcss.comMDN 前言 JavaScript 引入编程社区已有 20 多年&#xff0c;如今已成为有史以来使用最广泛的跨平台语言之一。JavaScript 最初是一种用…