FE_Vue学习笔记 路由基本使用

news2025/4/22 10:06:45

1 路由的简介- router

  1. 路由【route】就是一组key-value的对应关系。

  2. 多个路由，需要经过路由器【router】的管理。
    在这里插入图片描述

  3. SPA (single page web application）应用 - 单页面web应用【一个index.html】
    1）单页Web应用（single page web application, SPA）。
    2）整个应用只有一个完整的页面。
    3）点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
    4）数据需要通过 ajax 请求获取。
    在这里插入图片描述

  4. vue-router的理解：vue的一个插件库，专门用来实现SPA应用。

  5. 路由的理解：
    1）什么是路由？一个路由就是一组映射关系（key - value） key 为路径, value 可能是 function 或 component
    2）路由分类 后端路由：

1）理解：value 是 function, 用于处理客户端提交的请求。
2）工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。

前端路由：

1）理解：value 是 component，用于展示页面内容。
2）工作过程：当浏览器的路径改变时, 对应的组件就会显示。

2 案例引入路由基本使用

在这里插入图片描述
6. 这个路由案例由两部分组成：App.vue组件 + home.vue组件 + about .vue组件，我们首先写好home/about.插件：
在这里插入图片描述
7. 然后，我们安装vue-router插件：安装vue-router，命令：npm i vue-router 【npm i vue-router@3】，并且在main.js引入、应用插件:在这里插入图片描述
8. 然后，我们需要在【router/index.js】配置路由器：在这里插入图片描述

  1. 配置好路由器之后，我们需要在main.js使用：
    在这里插入图片描述
  2. 这个时候我们就可实现切换了：这里是App.vue中配置：
    在这里插入图片描述

2.1 几个注意点

  1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
  2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
  3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
  4. 整个应用中只有一个router，可以通过组件的$router属性获取到。

3 通过案例引入多级路由

在这里插入图片描述

  1. 首先我们新建News && Message组件：
    在这里插入图片描述
  2. 然后，配置路由规则，使用children配置项：
    在这里插入图片描述
  3. 在页面中，跳转（要写完整路径）：
    在这里插入图片描述

4 引出路由的query参数

在这里插入图片描述

  1. 路由的query参数
    1）作用：跳转的时候传递参数
    2）如何使用：跳转路由并携带query参数，有两种写法：
<ul>
      <li v-for="item in messageList" :key="item.id">
        <!-- 跳转路由并携带query参数，to的字符串写法 -->
        <!--        <router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{ item.title }}</router-link>&nbsp;&nbsp;-->
        <!-- 跳转路由并携带query参数，to的对象写法 -->
        <router-link :to="{
          path: '/home/message/detail',
          query: {
            id: item.id,
            title: item.title
          }
        }">{{ item.title }}
        </router-link>
      </li>
    </ul>
  1. 首先，新建一个三级路由组件 Detail.vue
    在这里插入图片描述
  2. 然后，我们在路由器中配置三级路由：
    在这里插入图片描述
  3. 然后，我们在修改组件Message.vue
    在这里插入图片描述

5 命名路由

1）作用：可以简化路由的跳转。
2）如何使用：给路由命名：
在这里插入图片描述
然后简化组件的跳转：
在这里插入图片描述

6 路由的params参数

1）配置路由，在路由器中必须声明接收params参数
在这里插入图片描述
2）传递参数 【params 传值 只能是 name】特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
在这里插入图片描述
3）接收参数
在这里插入图片描述

7 路由的props配置

功能是 ：让路由组件更方便的收到参数

7.1 props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件 - 死的数据

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

7.2 props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件

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

7.3 props的第三种写法，值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件

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

8 router-link的push && replace属性

点击页面所经过的url都会保存到栈中 （push模式）【默认的工作方式就是push模式】

...
...
4 http://localhost:8080/#/home/message/detail?id=001&title=%E6%B6%88%E6%81%AF001
3 http://localhost:8080/#/home/message
2 http://localhost:8080/#/Home
1 http://localhost:8080/#/

1）作用：控制路由跳转时操作浏览器历史记录的模式。
2）浏览器的历史记录有两种写入方式，分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push。
3）如何开启replace模式：

      <router-link replace active-class="active" :to="{
        name: 'guanyu'
      }"> About</router-link>

9 编程式路由导航

编程式路由导航作用：不借助router-link实现路由跳转，让路由跳转更加灵活。router-link 其实是一种a标签的方式实现路由跳转的，但是，如果是button 或者是无须用户操作的自动跳转，就无法实现路由跳转了吗？
在这里插入图片描述
在这里插入图片描述

9.1 后退，前进 页面操作

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

      // 前进三步
      this.$router.go(3)
      // 后退三步
      this.$router.go(-3)

10 缓存路由组件

缓存路由组件作用：让不展示的路由组件保持挂载，不被销毁。我们应该缓存路由组件，让不展示的路由组件保持挂载，不被销毁。
在这里插入图片描述
在这里插入图片描述

<!-- 缓存多个路由组件 -->
<keep-alive :include="['News','Message']">
    <router-view></router-view>
</keep-alive>
 
<!-- 缓存一个路由组件 -->
<keep-alive include="News">
    <router-view></router-view>
</keep-alive>

11 缓存一个路由组件 - 两个新的生命周期钩子

1）作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
2）具体名字：
activated 路由组件被激活时触发。
deactivated 路由组件失活时触发。
$nextTick 真实DOM出来之后再回调。

在这里插入图片描述

12 全局前置_路由守卫

在这里插入图片描述

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import News from "@/pages/News";
import Message from "@/pages/Message";
import Detail from "@/pages/Detail";

// 创建一个路由器
const router = new VueRouter({
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: About,
        },
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            // 二级路由
            children: [
                {
                    name: 'xinwen',
                    path: 'news',
                    component: News
                },
                {
                    name: 'xiaoxi',
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail',
                            component: Detail,
                            props($route) {
                                return {
                                    id: $route.query.id,
                                    title: $route.query.title
                                }
                            }
                        }
                    ]
                },
            ]
        },
    ]
})
// 全局前置路由守卫 - 初始化时执行、每次路由切换前被调用
router.beforeEach((to, from, next) => {
    console.log(to, from, next)
    if (to.path === '/home' || to.path === '/about') {
        if (localStorage.getItem("school") === 'PekingUniversity1') {
            next()
        }
    }
})

export default router

13 全局后置_路由守卫

$route中的meta：路由元信息

// 全局后置路由守卫 - 初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
    document.title = to.meta.title || '首页'
})
export default router

14 独享路由守卫

在这里插入图片描述

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import News from "@/pages/News";
import Message from "@/pages/Message";
import Detail from "@/pages/Detail";

// 创建一个路由器
const router = new VueRouter({
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: About,
            meta: {title: '关于'}

        },
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            meta: {title: '主页'},
            // 二级路由
            children: [
                {
                    name: 'xinwen',
                    path: 'news',
                    component: News,
                    meta: {isNext: true, title: '新闻'},
                    beforeEnter: (to, from, next) => {
                        if (to.meta.isNext) { //判断当前路由是否需要进行权限控制
                            if (localStorage.getItem('school') === 'PekingUniversity') {
                                next()
                            } else {
                                alert('学校名不对，没有查看权限！')
                            }
                        } else {
                            next()
                        }
                    }
                },
                {
                    name: 'xiaoxi',
                    path: 'message',
                    component: Message,
                    meta: {isNext: true, title: '消息'},
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail',
                            component: Detail,
                            meta: {title: '详情'},
                            props($route) {
                                return {
                                    id: $route.query.id,
                                    title: $route.query.title
                                }
                            }
                        }
                    ]
                },
            ]
        },
    ]
})

export default router

15 组件内路由守卫

<template>
  <div>
    <h2>i am about</h2>
  </div>
</template>

<script>
export default {
  name: `About`,
  // 进入守卫：通过路由规则，进入该组件时被调用
  beforeRouteEnter(to, from, next) {

  },
  // 离开守卫：通过路由规则，离开该组件时被调用
  beforeRouteLeave(to, from, next) {

  }
}
</script>

<style>
</style>

16 history模式与hash模式

路由器的两种工作模式
1）对于一个url来说，什么是hash值？——#及其后面的内容就是hash值。
2）hash值不会包含在HTTP请求中，即：hash值不会带给服务器。
3）hash模式：

地址中永远带着#号，不美观。
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
兼容性较好。

4）history模式：

地址干净，美观。
兼容性和hash模式相比略差。
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

打包指令：npm run build

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux快照太有趣了！

Linux快照太有趣了！

1.首先介绍一下什么是Linux快照 VMware 的菜单栏中有虚拟机快照这个选项&#xff0c;形象来说快照就相当于一个备份文件&#xff0c;记录的是虚拟机运行到某一节点时的状态&#xff0c;在虚拟机的使用过程中如果发生了意外&#xff0c;比如系统崩溃或系统异常&#xff0c;此时…
阅读更多...
python字典(一)——defaultdict的学习

python字典(一)——defaultdict的学习

一、前言 本页主要用来记录python字典的一些知识 二、Python中的defaultdict的详解 2.1defaultdict返回的默认值 defaultdict顾名思义默认字典&#xff0c;这个字典属于普通字典的一个子集&#xff0c;是对普通字典的改进 dcit的使用&#xff1a; 当访问字典里面不存在的key时会…
阅读更多...
leetcode：相对名次（详解）

leetcode：相对名次（详解）

前言&#xff1a;内容包括-题目&#xff0c;代码实现&#xff0c;大致思路&#xff0c;代码解读 目录 题目&#xff1a; 代码实现&#xff1a; 大致思路&#xff1a; 代码解读&#xff1a; part 1&#xff1a;开辟返回数组 part 2&#xff1a;score数组的每个元素及其下标…
阅读更多...
视觉大模型DINOv2:自我监督学习的新领域

视觉大模型DINOv2:自我监督学习的新领域

如果你对自监督学习感兴趣&#xff0c;可能听说过Facebook人工智能的DINO(无标签知识蒸馏)。我们在以前的文章中也介绍过它。DINOv2不仅是一个新版本而且带来了新的改进&#xff0c;并为判别性自监督学习设定了更高的标准。当然公司的名字也从Facebook变为了Meta。 本文将介绍…
阅读更多...
成功打破 GPT-4 上限，新版 Claude 横空出世！

成功打破 GPT-4 上限，新版 Claude 横空出世！

公众号关注 “GitHubDaily” 设为 “星标”&#xff0c;每天带你逛 GitHub&#xff01; 前 OpenAI 团队成员在离职后&#xff0c;创办了 Anthropic 公司。今年 3 月份的时候&#xff0c;该公司推出一款名为 Claude 的应用&#xff0c;试图与 ChatGPT 一争高下。 一个多月过去了…
阅读更多...
分享Python采集77个css3代码，总有一款适合您

分享Python采集77个css3代码，总有一款适合您

分享Python采集77个css3代码&#xff0c;总有一款适合您 Python采集的77个css3代码下载链接&#xff1a;https://pan.baidu.com/s/13EiUDXOAZvvKmF2KGrivzA?pwdubb2 提取码&#xff1a;ubb2 两款漂亮的bootstrap分页样式 纯CSS3用户卡片设计效果 4种炫酷CSS3 loading预加…
阅读更多...
第六十章 Unity 发布Web平台

第六十章 Unity 发布Web平台

WebGL 是一种用于在 Web 浏览器中渲染图形的 API&#xff0c;基于 OpenGL ES 图形库的功能。WebGL 1.0 大致与 OpenGL ES 2.0 功能相匹配&#xff0c;而 WebGL 2.0 大致与 OpenGL ES 3.0 功能相匹配。WebGL 构建选项允许 Unity 将内容发布为 JavaScript 程序&#xff0c;而这些…
阅读更多...
FastDFS+Nginx - 本地搭建文件服务器同时实现在外远程访问「端口映射」(1)

FastDFS+Nginx - 本地搭建文件服务器同时实现在外远程访问「端口映射」(1)

大家好&#xff0c;我是晓星航。今天为大家带来的是面向对象编程相关的讲解&#xff01;&#x1f600; 文章目录 前言1. 本地搭建FastDFS文件系统1.1 环境安装1.2 安装libfastcommon1.3 安装FastDFS1.4 配置Tracker1.5 配置Storage1.6 测试上传下载1.7 与Nginx整合1.8 安装Ngi…
阅读更多...
ARM 处理器模式(二)

ARM 处理器模式(二)

文章目录 ARM 处理器模式工作模式模式切换内核寄存器各个模式对应的内核寄存器 ARM 处理器模式 ARMv7-a 处理器共有 9 种工作模式 工作模式 User&#xff1a;用户模式&#xff0c;非特权模式&#xff0c;大部分程序运行的时候就处于此模式FIQ&#xff1a;快速中断模式&#x…
阅读更多...
算法修炼之练气篇——练气二十二层

算法修炼之练气篇——练气二十二层

博主&#xff1a;命运之光 专栏&#xff1a;算法修炼之练气篇 前言&#xff1a;每天练习五道题&#xff0c;炼气篇大概会练习200道题左右&#xff0c;题目有C语言网上的题&#xff0c;也有洛谷上面的题&#xff0c;题目简单适合新手入门。&#xff08;代码都是命运之光自己写的…
阅读更多...
Vue列表展示计数器【第二篇】

Vue列表展示计数器【第二篇】

&#x1f331; 1、vue列表展示案例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>vueDemo02列表展示</title> </head> <body> <div id"xy"><!--原始展示方式…
阅读更多...
2023最新CleanMyMac中文版系统清理优化工具

2023最新CleanMyMac中文版系统清理优化工具

CleanMyMac中文版功能非常的强大&#xff0c;操作简单&#xff0c;使用起来高效快捷&#xff0c;软件自身拥有一个安全数据&#xff0c;且拥有一定的规格&#xff0c;CleanMyMac中文版能够确定软件能够正确选择和清理Mac垃圾文件&#xff0c;更加安全&#xff0c;可靠。一键快速…
阅读更多...
thinkPhP6.0安装教程图解--PHP框架安装

thinkPhP6.0安装教程图解--PHP框架安装

ThinkPhP 6.0 安装 1.环境检查 首先&#xff0c;thinkphp6.0&#xff0c;要求php的环境是7.2.5及以上的&#xff0c;所以先检查自己的php环境是否符合要求。 在cmd命令窗口中输入php -v 或者没有配置环境变量的话&#xff0c;可以在php编辑器中输出php_info()或则PHP_VERSIO…
阅读更多...
记录一次异常：feign异常--NoSuchBeanDefinitionException: No qualifying bean of type

记录一次异常：feign异常--NoSuchBeanDefinitionException: No qualifying bean of type

1、完整报错 2023-06-29 16:17:28.127 WARN 3732 --- [ main] ConfigServletWebServerApplicationContext : Exception encountered during context initialization - cancelling refresh attempt: org.springframework.beans.factory.UnsatisfiedDependencyExcep…
阅读更多...
JetCache 使用简单案例到源码解析读这一篇就够

JetCache 使用简单案例到源码解析读这一篇就够

背景 github.com/alibaba/jet… 一、使用方法&#xff1a; 1. 创建项目— 此处使用springboot项目 2. 引入starter <dependency> <groupId>com.alicp.jetcache</groupId> <artifactId>jetcache-starter-redis</artifactId><version>2…
阅读更多...
Servlet3.0 新特性全解

Servlet3.0 新特性全解

Servlet3.0新特性全解 tomcat 7以上的版本都支持Servlet 3.0 Servlet 3.0 新增特性 注解支持&#xff1b;Servlet、Filter、Listener无需在web.xml中进行配置&#xff0c;可以通过对应注解进行配置&#xff1b;支持Web模块&#xff1b;Servlet异步处理&#xff1b;文件上传AP…
阅读更多...
DEV SIT UAT PET SIM PRD PROD常见环境英文缩写含义

DEV SIT UAT PET SIM PRD PROD常见环境英文缩写含义

一、英文缩写 英文中文 DEV development开发 SIT System Integrate Test系统整合测试&#xff08;内测&#xff09; UAT User Acceptance Test用户验收测试 PET Performance Evaluation Test性能评估测试&#xff08;压测&#xff09; SIM simulation仿真 PRD/PROD produ…
阅读更多...
我们花一个月调研了小红书种草的新机会和增长策略

我们花一个月调研了小红书种草的新机会和增长策略

分析师&#xff1a;Jane、彬超 编辑&#xff1a;yolo 出品&#xff1a;增长黑盒研究组 *本报告为增长黑盒独立研究系列&#xff0c; 与第三方不存在任何利益关系 随着618的临近&#xff0c;小红书再次成为了品牌重要的“营销战场”。面临着经济环境的不确定性&#xff0c;想必各…
阅读更多...
数据结构_串

数据结构_串

目录 1. 串的定义和实现 1.1 串的定义 1.2 串的存储结构 1.2.1 定长顺序存储表示 1.2.2 堆分配存储表示 1.2.3 块链存储表示 1.3 串的基本操作 2. 串的模式匹配 2.1 简单的模式匹配算法 2.2 串的模式匹配算法——KMP算法 2.2.1 字符串的前缀、后缀和部分匹配值 2.2…
阅读更多...
你不知道的裁员攻略：真正的离职赔偿是2N起步，不是N+1！计算赔偿金时，年终奖要计入总收入！...

你不知道的裁员攻略：真正的离职赔偿是2N起步，不是N+1！计算赔偿金时，年终奖要计入总收入！...

最近裁员现象猖獗&#xff0c;许多人都不知道如何维护自己的合法权益&#xff0c;在和公司撕扯时屡屡被坑。一位曾经和字节撕过且成功的网友&#xff0c;友情给大家写了一份离职攻略。但要注意&#xff0c;这份攻略只针对那些守规矩的大公司&#xff0c;如果是不守规矩的小公司…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023