【VUE】day07 路由

【VUE】day07 路由

  • 1. 路由
  • 2. 前端路由的工作方式
  • 3. 实现简易的前端路由
  • 4. 安装和配置路由
    • 4.1 安装`vue-router`包
    • 4.2 创建路由模块
    • 4.3 导入并挂在路由模块
  • 5. 在路由模块中声明路由的对应关系
    • 5.1 router-view

1. 路由

在 Vue.js 中，路由（Routing）是通过 ​Vue Router 实现的。Vue Router 是 Vue.js 官方提供的路由管理器，用于构建单页面应用程序（SPA）。它允许你在不重新加载页面的情况下，动态切换视图和组件，同时保持 URL 的同步。

在 Vue.js 中，路由（Routing）是通过 ​Vue Router 实现的。Vue Router 是 Vue.js 官方提供的路由管理器，用于构建单页面应用程序（SPA）。它允许你在不重新加载页面的情况下，动态切换视图和组件，同时保持 URL 的同步。


总体来说，可以实现以下的功能

  • 通过URL来映射不同的组件，实现页面切换；

  • 支持动态路由，使 URL 传递参数；

  • 提供嵌套路由，实现多级路由嵌套；

  • 支持编程式导航，可以通过 JavaScript 代码进行跳转；

  • 提供路由守卫，控制页面访问权限。

核心概念
​1. 路由（Route）​
路由定义了 URL 和组件之间的映射关系。当用户访问某个 URL 时，Vue Router 会根据路由配置加载相应的组件。

​2. 路由表（Routes）​
路由表是一个数组，包含多个路由配置。每个路由配置通常包括 path（路径）、component（组件）等属性。

3.​ 路由器（Router）​
路由器是 Vue Router 的核心实例，负责管理路由表和处理路由切换。

4.​ 路由视图（RouterView）​
<router-view> 是一个占位符组件，用于渲染当前路由匹配的组件。

​5. 路由链接（RouterLink）​
<router-link>是一个导航组件，用于生成导航链接，点击后会切换到对应的路由。

​6. 动态路由
动态路由允许在路径中使用参数（如 /user/:id），这些参数可以在组件中通过 this.$route.params 访问。

7.​ 嵌套路由
嵌套路由允许在父路由中定义子路由，用于构建复杂的页面结构。

8.​ 路由守卫（Navigation Guards）​
路由守卫是钩子函数，用于在路由切换前后执行某些操作，例如权限验证、数据加载等。

2. 前端路由的工作方式


在这里插入图片描述

在这里插入图片描述

3. 实现简易的前端路由

在这里插入图片描述
在这里插入图片描述

但实际应该动态的显示组件
在这里插入图片描述

<template><div class="app-container"><h1>App 根组件</h1><a href="#/home">首页</a><a href="#/movie">电影</a><a href="#/about">关于</a><hr /><component :is="comName"></component></div>
</template><script>
// 导入组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'export default {name: 'App',data(){return{comName: 'Home'}},created(){window.onhashchange = () =>{console.log('监听到hash地址的变化',location.hash)switch(location.hash){case '#/home':this.comName = 'Home'breakcase '#/movie':this.comName = 'Movie'breakcase '#/about':this.comName = 'About'break}}},// 注册组件components: {Home,Movie,About}
}
</script><style lang="less" scoped>
.app-container {background-color: #efefef;overflow: hidden;margin: 10px;padding: 15px;> a {margin-right: 10px;}
}
</style>

4. 安装和配置路由

vue-router安装和配置的步骤。
① 安装vue-router包
② 创建路由模块
③ 导入并挂在路由模块
④ 声明路由链接和占位符

4.1 安装vue-router包

在vue2的项目中安装vue-router的命令如下：

npm i vue-router@3.5.2 -S

4.2 创建路由模块

在src源代码目录下，新建router/index.js路由模块，并初始化如下的代码：

在这里插入图片描述

// src/router/index.js 就是当前项目的路由模块
import Vue from 'vue'
import VueRouter from 'vue-router'// 导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'import Login from '@/components/Login.vue'
import Main from '@/components/Main.vue'// 把 VueRouter 安装为 Vue 项目的插件
// Vue.use() 函数的作用，就是来安装插件的
Vue.use(VueRouter)// 创建路由的实例对象
const router = new VueRouter({// routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系routes: [// 重定向的路由规则{ path: '/', redirect: '/home' },// 路由规则{ path: '/home', component: Home },// 需求：在 Movie 组件中，希望根据 id 的值，展示对应电影的详情信息// 可以为路由规则开启 props 传参，从而方便的拿到动态参数的值{ path: '/movie/:mid', component: Movie, props: true },{path: '/about',component: About,// redirect: '/about/tab1',children: [// 子路由规则// 默认子路由：如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”{ path: '', component: Tab1 },{ path: 'tab2', component: Tab2 }]},{ path: '/login', component: Login },{ path: '/main', component: Main }]
})// 为 router 实例对象，声明全局前置导航守卫
// 只要发生了路由的跳转，必然会触发 beforeEach 指定的 function 回调函数
router.beforeEach(function(to, from, next) {// to 表示将要访问的路由的信息对象// from 表示将要离开的路由的信息对象// next() 函数表示放行的意思// 分析：// 1. 要拿到用户将要访问的 hash 地址// 2. 判断 hash 地址是否等于 /main。// 2.1 如果等于 /main，证明需要登录之后，才能访问成功// 2.2 如果不等于 /main，则不需要登录，直接放行  next()// 3. 如果访问的地址是 /main。则需要读取 localStorage 中的 token 值// 3.1 如果有 token，则放行// 3.2 如果没有 token，则强制跳转到 /login 登录页if (to.path === '/main') {// 要访问后台主页，需要判断是否有 tokenconst token = localStorage.getItem('token')if (token) {next()} else {// 没有登录，强制跳转到登录页next('/login')}} else {next()}
})export default router

4.3 导入并挂在路由模块

import Vue from 'vue'
import App from './App2.vue'// 导入路由模块，目的：拿到路由的实例对象
// 在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下，名字叫做 index.js 的文件
import router from '@/router/index.js'// 导入 bootstrap 样式
import 'bootstrap/dist/css/bootstrap.min.css'
// 全局样式
import '@/assets/global.css'Vue.config.productionTip = falsenew Vue({render: h => h(App),// 在 Vue 项目中，要想把路由用起来，必须把路由实例对象，通过下面的方式进行挂载// router: 路由的实例对象router
}).$mount('#app')

5. 在路由模块中声明路由的对应关系

5.1 router-view

<router-view> 是 Vue Router 提供的核心组件之一，用于渲染匹配当前路由的组件。它是构建单页面应用（SPA）的关键元素，负责根据路由配置动态加载和显示不同的视图组件。 以下是关于 <router-view> 的详细介绍：

一、<router-view>的作用与功能
​1.动态渲染组件
<router-view> 是一个占位符组件，会根据当前路由路径（URL）自动渲染匹配的组件。例如，当用户访问 /home 时，<router-view> 会渲染 Home 组件。

2.支持嵌套路由
在嵌套路由中，<router-view> 可以嵌套使用，用于渲染子路由对应的组件。例如，父路由 /user 中嵌套子路由 /user/profile，子组件会渲染在父组件的 中。

​3.过渡动画
<router-view> 可以与 Vue 的 <transition> 组件结合，为路由切换添加动画效果，提升用户体验。

​4,命名视图
支持多视图渲染，通过 name 属性指定不同的视图出口。例如，主视图和侧边栏视图可以分别渲染在不同的 <router-view> 中。

二、基本用法
1.简单示例
在 App.vue 中使用 <router-view>渲染匹配的组件：

<template><div id="app"><nav><router-link to="/">Home</router-link><router-link to="/about">About</router-link></nav><router-view></router-view> <!-- 渲染匹配的组件 --></div>
</template>

2.​嵌套路由示例
在父组件中嵌套 <router-view> 渲染子路由：

<template><div><h2>User Page</h2><router-link to="/user/profile">Profile</router-link><router-link to="/user/posts">Posts</router-link><router-view></router-view> <!-- 渲染子路由组件 --></div>
</template>

3.过渡动画示例
为路由切换添加淡入淡出效果：

<template><div id="app"><router-view v-slot="{ Component }"><transition name="fade" mode="out-in"><component :is="Component" /></transition></router-view></div>
</template><style>
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style>

其他例子

APP.vue<template><div class="app-container"><h1>App2 组件</h1><!-- 当安装和配置了 vue-router 后，就可以使用 router-link 来替代普通的 a 链接了 --><!-- <a href="#/home">首页</a> --><router-link to="/home">首页</router-link><!-- 注意1：在 hash 地址中， / 后面的参数项，叫做“路径参数” --><!-- 在路由“参数对象”中，需要使用 this.$route.params 来访问路径参数 --><!-- 注意2：在 hash 地址中，? 后面的参数项，叫做“查询参数” --><!-- 在路由“参数对象”中，需要使用 this.$route.query 来访问查询参数 --><!-- 注意3：在 this.$route 中，path 只是路径部分；fullPath 是完整的地址 --><!-- 例如： --><!-- /movie/2?name=zs&age=20 是 fullPath 的值 --><!-- /movie/2 是 path 的值 --><router-link to="/movie/1">洛基</router-link><router-link to="/movie/2?name=zs&age=20">雷神</router-link><router-link to="/movie/3">复联</router-link><router-link to="/about">关于</router-link><hr /><!-- 只要在项目中安装和配置了 vue-router，就可以使用 router-view 这个组件了 --><!-- 它的作用很单纯：占位符 --><router-view></router-view></div>
</template><script>
export default {name: 'App'
}
</script><style lang="less" scoped>
.app-container {background-color: #efefef;overflow: hidden;margin: 10px;padding: 15px;> a {margin-right: 10px;}
}
</style>
// src/router/index.js 就是当前项目的路由模块
import Vue from 'vue'
import VueRouter from 'vue-router'// 导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'import Login from '@/components/Login.vue'
import Main from '@/components/Main.vue'// 把 VueRouter 安装为 Vue 项目的插件
// Vue.use() 函数的作用，就是来安装插件的
Vue.use(VueRouter)// 创建路由的实例对象
const router = new VueRouter({// routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系routes: [// 重定向的路由规则{ path: '/', redirect: '/home' },// 路由规则,把#去掉{ path: '/home', component: Home },// 需求：在 Movie 组件中，希望根据 id 的值，展示对应电影的详情信息// 可以为路由规则开启 props 传参，从而方便的拿到动态参数的值{ path: '/movie/:mid', component: Movie, props: true },{path: '/about',component: About,// redirect: '/about/tab1',children: [// 子路由规则// 默认子路由：如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”{ path: '', component: Tab1 },{ path: 'tab2', component: Tab2 }]},{ path: '/login', component: Login },{ path: '/main', component: Main }]
})// 为 router 实例对象，声明全局前置导航守卫
// 只要发生了路由的跳转，必然会触发 beforeEach 指定的 function 回调函数
router.beforeEach(function(to, from, next) {// to 表示将要访问的路由的信息对象// from 表示将要离开的路由的信息对象// next() 函数表示放行的意思// 分析：// 1. 要拿到用户将要访问的 hash 地址// 2. 判断 hash 地址是否等于 /main。// 2.1 如果等于 /main，证明需要登录之后，才能访问成功// 2.2 如果不等于 /main，则不需要登录，直接放行  next()// 3. 如果访问的地址是 /main。则需要读取 localStorage 中的 token 值// 3.1 如果有 token，则放行// 3.2 如果没有 token，则强制跳转到 /login 登录页if (to.path === '/main') {// 要访问后台主页，需要判断是否有 tokenconst token = localStorage.getItem('token')if (token) {next()} else {// 没有登录，强制跳转到登录页next('/login')}} else {next()}
})export default router

P7 todo

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

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

相关文章

WPS宏开发手册——使用、工程、模块介绍

WPS宏开发手册——使用、工程、模块介绍

目录 系列文章前言1、开始1.1、宏编辑器使用步骤1.2、工程1.3、工程 系列文章 使用、工程、模块介绍 JSA语法 第三篇练习练习题&#xff0c;持续更新中… 前言 如果你是开发人员&#xff0c;那么wps宏开发对你来说手拿把切。反之还挺吃力&#xff0c;需要嘻嘻&#xf…
阅读更多...
数学概念学习

数学概念学习

# 欧式空间 ## 定义 日常生活观察到的几何空间&#xff1a;一维、平面和三维空间。 ## 点与向量 是欧式空间的基本元素。 ## 距离和内积 距离&#xff1a;通过欧几里得距离公式计算 内积&#xff08;点积&#xff09;&#xff1a; 通过两个向量的内积来测量他们的相似性&…
阅读更多...
InnoDB 引擎核心知识点

InnoDB 引擎核心知识点

InnoDB 引擎核心知识点 6.1 逻辑存储结构 表空间&#xff08;Tablespace&#xff09;&#xff1a;所有数据逻辑上存储在一个表空间中&#xff0c;物理上可能由多个文件组成。段&#xff08;Segment&#xff09;&#xff1a;分为数据段&#xff08;B树叶子节点&#xff09;、索引…
阅读更多...
C++《红黑树》

C++《红黑树》

在之前的篇章当中我们已经了解了基于二叉搜索树的AVL树&#xff0c;那么接下来在本篇当中将继续来学习另一种基于二叉搜索树的树状结构——红黑树&#xff0c;在此和之前学习AVL树类似还是通过先了解红黑树是什么以及红黑树的结构特点&#xff0c;接下来在试着实现红黑树的结构…
阅读更多...
java实现coze平台鉴权+工作流调用（踩坑记录）

java实现coze平台鉴权+工作流调用（踩坑记录）

问题偏多建议大家看完文章后再开始实现 OAuth鉴权 https://www.coze.cn/open/docs/developer_guides/preparation https://www.coze.cn/open/docs/developer_guides/oauth_apps OAuth 授权码鉴权 https://www.coze.cn/open/docs/developer_guides/oauth_code 创建OAuth应…
阅读更多...
2025年优化算法：龙卷风优化算法（Tornado optimizer with Coriolis force，TOC）

2025年优化算法：龙卷风优化算法（Tornado optimizer with Coriolis force，TOC）

龙卷风优化算法&#xff08;Tornado optimizer with Coriolis force&#xff09;是发表在中科院二区期刊“ARTIFICIAL INTELLIGENCE REVIEW”&#xff08;IF&#xff1a;11.7&#xff09;的2025年智能优化算法 01.引言 当自然界的狂暴之力&#xff0c;化身数字世界的智慧引擎&…
阅读更多...
面试题分享-多线程顺序打印奇偶数

面试题分享-多线程顺序打印奇偶数

目录 1.题目详情 2.解题思路 2.1.分析题目 2.2.解析思路 3.代码实现 4.运行结果 1.题目详情 昨天刷抖音&#xff0c;遇到一个面试题&#xff0c;描述如下&#xff1a; 请使用两个线程&#xff0c;分别顺序交替打印奇数和偶数&#xff0c;直到10为止。例如有两个线程&#…
阅读更多...
QuecPython 网络协议之TCP/UDP协议最祥解析

QuecPython 网络协议之TCP/UDP协议最祥解析

概述 IP 地址与域名 IP 地址是网络中的主机地址&#xff0c;用于两台网络主机能够互相找到彼此&#xff0c;这也是网络通信能够成功进行的基础。IP 地址一般以点分十进制的字符串来表示&#xff0c;如192.168.1.1。 ​ 我们日常访问的网站&#xff0c;其所在的服务器主机都有…
阅读更多...
React - LineChart组件编写（用于查看每日流水图表）

React - LineChart组件编写（用于查看每日流水图表）

一、简单版本 LineChart.tsx // src/component/LineChart/LineChart.tsx import React, {useEffect,useRef,useImperativeHandle,forwardRef,useMemo,useCallback, } from react; import * as echarts from echarts/core; import type { ComposeOption } from echarts/core; …
阅读更多...
医学图像分割数据集肺分割数据labelme格式6299张2类别

医学图像分割数据集肺分割数据labelme格式6299张2类别

数据集格式&#xff1a;labelme格式(不包含mask文件&#xff0c;仅仅包含jpg图片和对应的json文件) 图像分辨率&#xff1a;1024x1024 图片数量(jpg文件个数)&#xff1a;6299 标注数量(json文件个数)&#xff1a;6299 标注类别数&#xff1a;2 标注类别名称:["leftl…
阅读更多...
帕金森病致生活艰难，如何缓解心理负担？

帕金森病致生活艰难，如何缓解心理负担？

你是否留意到身边有人手部不由自主地颤抖&#xff0c;且肢体变得僵硬&#xff0c;行动也愈发迟缓&#xff1f;这很可能是帕金森病的症状。帕金森病是一种常见的神经系统退行性疾病&#xff0c;多发生于中老年人。​ 静止性震颤往往是帕金森病的首发症状&#xff0c;患者在安静状…
阅读更多...
从零构建大语言模型全栈开发指南：第二部分：模型架构设计与实现-2.1.1自注意力机制（Scaled Dot-Product Attention）的逐行代码实现

从零构建大语言模型全栈开发指南：第二部分：模型架构设计与实现-2.1.1自注意力机制（Scaled Dot-Product Attention）的逐行代码实现

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路 文章大纲 2.1.1 自注意力机制（Scaled Dot-Product Attention）的逐行代码实现1. 自注意力机制的核心原理与数学表达1.1 注意力计算的三元组：`Q, K, V`2. 逐行代码实现与解析2.1 输入嵌入与权重矩阵初始化2.2 完…
阅读更多...
机械臂【逆运动学】

机械臂【逆运动学】

回顾正运动学fk&#xff1a; IK&#xff1a; 几何法 代数法 六轴 456轴交再同一点 有解析解 下列公式为正运动学部分结论 a和d是长度 &#xff0c;theta和alfa是角度 **疑问&#xff1a;alfa00&#xff1f; Z轴互相平行 ** 已知末端要在空间XYZ处如下 绿色项&#x…
阅读更多...
IDEA批量替换项目下所有文件中的特定内容

IDEA批量替换项目下所有文件中的特定内容

文章目录 1. 问题引入2. 批量替换项目下所有文件中的特定内容2.1 右键项目的根目录&#xff0c;点击在文件中替换2.2 输入要替换的内容 3. 解决替换一整行文本后出现空行的问题4. 增加筛选条件提高匹配的精确度 更多 IDEA 的使用技巧可以查看 IDEA 专栏&#xff1a; IDEA 1. 问…
阅读更多...
Ubuntu22.04美化MacOS主题

Ubuntu22.04美化MacOS主题

安装Tweaks 参考Ubuntu 22.04 桌面美化成Mac风格这篇更好点 sudo apt install gnome-tweaks gnome-shell-extensions -y安装macos主题 git clone https://github.com/vinceliuice/WhiteSur-gtk-theme.git # 进到文件目录 ./install.sh -t all -N glassy sudo ./tweaks.sh -g…
阅读更多...
基于Python的机器学习入门指南

基于Python的机器学习入门指南

在当今数字化时代&#xff0c;机器学习&#xff08;Machine Learning&#xff09;已经成为科技领域中最热门的话题之一。它不仅改变了我们对数据的理解和处理方式&#xff0c;还在许多行业中得到了广泛应用&#xff0c;如金融、医疗、交通等。Python作为一门强大的编程语言&…
阅读更多...
Python前缀和(例题：异或和，求和)

Python前缀和(例题：异或和，求和)

前缀和 前缀和&#xff1a;对于一个长度为n的列表a&#xff0c;前缀和为&#xff1a; sum[i]a[0]a[1]...a[i] 前缀和的性质&#xff1a; 第一条性质用于处理出前缀和&#xff1a; Sum[i]Sum[i-1]a[i] 第二条性质可以在O(l)的时间内求出区间和&#xff1a; a[l]....a[r] S…
阅读更多...
统计矩的高阶推广：经验还是理论推导？

统计矩的高阶推广：经验还是理论推导？

矩的发展既是经验总结的结果&#xff0c;也是数学理论推导的产物。研究者们在分析数据、描述物理现象的过程中&#xff0c;发现了低阶矩与日常物理概念&#xff08;如质心、惯性&#xff09;之间的紧密联系&#xff0c;而高阶矩的应用往往出现在更复杂的数学体系中&#xff0c;…
阅读更多...
安宝特分享｜AR智能装备赋能企业效率跃升

安宝特分享｜AR智能装备赋能企业效率跃升

AR装备开启智能培训新时代 在智能制造与数字化转型浪潮下&#xff0c;传统培训体系正面临深度重构。安宝特基于工业级AR智能终端打造的培训系统&#xff0c;可助力企业构建智慧培训新生态。 AR技术在不同领域的助力 01远程指导方面 相较于传统视频教学的单向输出模式&#x…
阅读更多...
《软件安装与使用教程》— NVIDIA CUDA在Windows的安装教程

《软件安装与使用教程》— NVIDIA CUDA在Windows的安装教程

《软件安装与使用教程》— NVIDIA CUDA在Windows的安装教程 Installed: - Nsight Monitor Not Installed: - Nsight for Visual Studio 2019 Reason: VS2019 was not found - Nsight for Visual Studio 2017 Reason: VS2017 was not found - Integrated Graphics Frame Debugge…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023