Vue-Route4 ts

news2024/11/23 4:29:11

小满学习视频
Vue-Route 官网

项目的目录结构：
在这里插入图片描述

1. Vue-Router的使用

安装Vue-route

pnpm add vue-router@4

创建router文件

  • /route/index.vue
import { createRouter } from "vue-router";
import {
  createMemoryHistory,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";

import type { RouteRecordRaw } from "vue-router";
// 2. 定义路由
const routes: RouteRecordRaw[] = [
  {
    path: "/",  // 浏览器中的路径
    name: "login", // 路由名称（非必需）
    component: () => import("@/views/login.vue"), // 路由组件
  },
  {
    path: "/home",
    name: "home",
    component: () => import("@/views/home.vue"),
  },
  {
    path: "/about",
    component: () => import("@/views/about.vue"),
  },
];
// 1. 创建路由器实例
const router = createRouter({
  // 缺点：浏览器没有前进后退按钮
  history: createMemoryHistory(),
  // 缺点：地址中有#号不美观；优点：兼容性是最好的，不需要服务器做任何配置
  // history: createWebHashHistory(),
  // 缺点：需要服务器做适配；优点：支持浏览器的前进/后退；
  // history: createWebHistory(),
  routes,
});

export default router;
  • 关于历史记录模式
    • 历史记录模式共有三种，各有优缺点
    • 官网推荐使用createWebHistory，后端服务器的配置也不麻烦
    • 不注重美观的后台管理网站中推荐使用createWebHashHistory
  • router和route两个的关系
    • router：路由器，是路由的管理者，管理着所有的路由
    • route：路由，一条一条的线路，浏览器url对应着vue

在main.ts中全局引用该插件

// 引入插件vue-router
import router from './router'

createApp(App).use(router).mount('#app')

如何使用

在template中通过router-link导航

  • App.vue代码
<template>
  <div>
    <!-- 通过路由的name 属性，跳转到对应的路由地址  -->
    <router-link :to="{ name: 'home' }">主页</router-link>
    <!-- 通过路由的path 属性，跳转到对应的路由地址 -->
    <router-link to="/about">关于</router-link>
    <router-link to="/">登录</router-link>
  </div>
  <hr />
  <router-view></router-view>
</template>

<script setup lang="ts"></script>
  • router-link：可理解为特殊的a标签，不同的是router-link不会在跳转时引起页面的抖动
  • router-view：可理解为占位符，会在它所在的位置渲染当前 URL 路径对应的路由组件

在script中通过router实例导航（编程式导航）

  • 在实际应用中，通常在渲染某个页面时需要执行一些操作，要使用编程式导航
父组件App.vue
<template>
  <div>
    编程式导航：
    <button @click="toLogin">登录</button>
    <button @click="toHome('/home')">主页</button>
    <button @click="toAbout('/about')">关于</button>
    <button @click="toLogin1('login')">登录</button>
  </div>
  <hr />
  <router-view></router-view>
</template>

<script setup lang="ts">
// 获取路由器实例
const router = useRouter();
console.log(router);

// 返回当前路由地址
const route = useRoute();
console.log(route);

// 字符串形式跳转
const toLogin = () => {
  router.push("/");
};
// 字符串传参
const toHome = (url: string) => {
  router.push(url);
};
// 对象的形式,传入path
const toAbout = (url: string) => {
  router.push({
    path: url,
  });
};
// 对象形式，传入name
const toLogin1 = (name: string) => {
  router.push({
    name,
  });
};
</script>
  • Router实例
    • 获取Router实例：const router = useRouter();
    • 路由器实例中有什么：
      在这里插入图片描述
  • Route实例
    • 获取Route实例：const route = useRoute();
    • Route实例中有什么：
      在这里插入图片描述

replace 不保存历史记录

  • 在<router-link>加入属性replace
<router-link replace to="/">登录</router-link>
  • 编程式导航，跳转使用router.repalce
// 字符串形式跳转
const toLogin = () => {
  router.replace("/");
};
  • 前进、后退
    <button @click="next">前进</button>
    <button @click="prev">后退</button>


// 页面前进
const next = () => {
	// go中的数字代表前进几个页面
    router.go(1)
}
// 页面后退
const prev = () => {
    // router.go(-1)
    router.back()
}
  • 在router实例中可以看到back方法其实调用的就是go(-1)方法
    在这里插入图片描述

2. 路由传递数据

2.1 query传参

  • 和向服务器发送get请求一样，通过浏览器传递参数

  • 发送方代码：

import { useRouter} from "vue-router";
const data = ref({
    name:"Tom",
    age:18
})
const router = useRouter();
// 通过query传参
const sendData = () => {
    router.push({
        // path:"/about",
        name:"about",
        query:data.value
    })
}
  • 接收方代码：
<template>
  <div>
    姓名：{{ route.query.name }} <br>
    年龄：{{ route.query.age }}
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
const route = useRoute();
  • 浏览器中显示
http://localhost:5173/about?name=Tom&age=18

3. 嵌套路由children

  • 重点是children[]
const routes1: RouteRecordRaw[] = [
  {
    path: "/user", // 浏览器中的路径
    name: "f-route", // 路由名称（非必需）
    component: () => import("@/router-child/fRoute.vue"), // 路由组件
    children: [
      {
        path: "", // 默认加载子路由
        name: "sonRoute1",
        component: () => import("@/router-child/sonRoute1.vue"),
      },
      {
        path: "sonRoute2",
        name: "sonRoute2",
        component: () => import("@/router-child/sonRoute2.vue"),
      },
    ],
  },
];

使用子路由

path以/开头的是绝对路径，它是完整路径不受父路径影响，没有/是相对路径，需要向上找父级路径，直到找到带/的路径，并且把路径都拼接起来

  • <router-link>使用的是绝对路径：父路由的path+/+子路由的path
  <router-link to="/user">第一个子路由</router-link>
  <router-link :to="{name:'sonRoute2'}">第二个子路由</router-link>
  <router-view></router-view>

4. 命名路由components

  • 在routes中定义组件的名字
    1. 同一视图中展示多个组件，使用components的对象形式
    2. 给组件起个名字（名字随意，没有限制）
const routes2: RouteRecordRaw[] = [
  {
    path: "/", // 根路径
    component: () => import("@/name-views/root.vue"), // 路由组件
    children: [
      {
        path: "showLeft", 
        name: "showLeft",
        components:{
           default:() => import("@/name-views/a.vue"), // default对应的是<router-view></router-view>
           bbb:() => import("@/name-views/b.vue"),	// bbb对应的是 <router-view name="bbb">
        }
      },
      {
        path: "showRight",
        name: "showRight",
        components: {
          default:() => import("@/name-views/a.vue"),
          ccc:() => import("@/name-views/c.vue"), // ccc对应的是 <router-view name="ccc">
        }
      },
    ],
  },
];
  • 在vue中使用命名组件
    1. components中的default对应到vue中的代码是<router-view></router-view>
    2. components中包含几个组件，浏览器中显示几个组件的视图
    3. 组件在浏览器的位置是由<router-view>所在的位置决定的
  <router-link to="/showLeft">显示左侧导航</router-link><br />
  <router-link :to="{name:'showRight'}">显示右侧导航</router-link>
  <div>
    <router-view name="bbb"></router-view>
    <router-view></router-view>
    <router-view name="ccc"></router-view>
  </div>
  • 浏览器显示结果
    在这里插入图片描述

5. 重定向redirect

访问某一个路由时，自动跳转到重定向的路由

  • 字符串形式
 const routes: RouteRecordRaw[] =[
	{
		path:"/",
		redirect::"/home", // 使用绝对路径 
	}
]
  • 对象形式
 const routes: RouteRecordRaw[] =[
	{
		path:"/",
		redirect:{
     		 // path:"/home" 
      		name:"home"
    	},
	}
]
  • 方法
const routes = [
  {
    path: '/',
    redirect: to => {
      console.log(to) // to：当前路径的相关信息
      return { 
      	path: '/home', // 重定向的绝对路径
      	query: { name："小满" } // 通过路由传参，看上面的query传参
      	}
    },
  },
]

6. 别名alias

就是给路径起个别的名字，必须是绝对路径

  • 字符串
 const routes: RouteRecordRaw[] =[
	{
		path:"/",
		alias:"/xiaoman",
	}
]
  • 数组方式
 const routes: RouteRecordRaw[] =[
	{
		path:"/",
		alias:["/xiaoman","/daman"],
	}
]
  • 使用
http://localhost:5173/daman
http://localhost:5173/xiaoman

上面的两个地址都是指向
http://localhost:5173/

7. 路由守卫

  • 在路由发生跳转前，和跳转发生后执行一些代码
  • 特别注意：在守卫中跳转后，也是发生了路径的变化，所以还会重新走一次路由守卫，小心死循环

前置守卫

  • 当浏览器中地址发生改变时触发
import router from "./index" // 记得导入已经创建的路由器router

router.beforeEach((to, from) => {
    console.log("to:" ,to, "from:",from)
})
  • 在守卫中的路由跳转
router.beforeEach((to, from) => {
    // 各种条件判断
    if(to.path !== '/' && !localStorage.getItem('token')){
    	
    	return false 	// 取消当前的导航，不会向任何路由跳转
        
        return "/" 		// return的值会赋值到 to.path
       
        return { path: '/' }	// return一个对象
        
        return {name:'login'}
    }
})

  • to将要进入的目标路由
    在这里插入图片描述

  • from 将要离开的路由
    -

  • 第三个参数next（官网不建议使用）

next()的作用：next()就是通过的意思，但是通过后会继续走剩下的代码，并且next()在代码中会调用多次，不容易察觉错误

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

后置守卫

  • 路由加载后执行，执行的时间在vue组件加载之前
router.afterEach((to, from) => {
	// todo
})

实现页面加载进度条nprogress

小满视频里面是手写的，我看的困，使用现成的

首先这个进度条是假的，并不能真正的表示加载页面的进度

  • 安装
pnpm add nprogress
  • 在路由中使用
import NProgress from "nprogress"
import 'nprogress/nprogress.css' //这个样式必须引入

NProgress.configure({ showSpinner: false }); // 取消右侧的转圈圈
// 页面跳转时开始
router.beforeEach((to, from) => {
    NProgress.start() // 
})
// 路由成功跳转完成后
router.afterEach((to, from) => {
    NProgress.done()
})
  • 效果
    在这里插入图片描述

8. 路由元信息

路由中添加meta属性

  • 在每条单独的路由上可以添加meta属性，meta属性是一个对象，对象中可以添加很多信息
  {
     path:"/",
     component: () => import("@/views/index.vue"),
     meta:{
       title:'标题栏显示',
       show: true,
     }
   }

在.d.ts中增加meta的类型

import "vue-router"
declare module 'vue-router'{
    interface RouteMeta{
        title:string
        icon?:string
    }
}

在守卫中获取meta

router.beforeEach((to, from) => {
    // to.meta
    document.title = to.meta.title
})

在vue中获取meta

import {useRoute} from 'vue-router'
const route = useRoute()
console.log(route.meta.title)

获取父级路由的meta

在这里插入图片描述

假设当前路由有父级路由，则通过数组matched[]访问

import {useRoute} from 'vue-router'
const route = useRoute()
console.log(route.meta.title) // 当前路由的meta
console.log(route.matched[0].meta.title) // 父级路由的meta

9. 路由应用示例

1.过渡动效

  • 给<router-view>加动画效果

使用animatecss的动画效果，参考：animatecss动画效果

  • 安装animatecss
pnpm add animate.css
  • 在元数据中加入要采用的动画效果
  {
    path: "/",
    name: "login",
    component: () => import("@/views/login.vue"),
    meta: {
      title: "登录",
      transition:"animate__fadeInDown" // 动画效果来自animatecss
    },

记得修改.d.ts中RouteMeta的类型

  • 在要使用动效的vue中引入
import "animate.css";

<template>
  <div>
    <router-view #default="{route,Component}"> 
    <!-- 在路由的meta中配置的动画效果，放在这里使用 -->
        <Transition  :enter-active-class="`animate__animated ${route.meta.transition}`">
            <component :is="Component"></component>
        </Transition>
    </router-view>
  </div>
</template>
  • 插槽中的route和Component是固定的，这段代码中唯一能修改的就是Transition标签 的属性
  • route：当前路由，通过route.meta访问元数据中的值
  • Component：vNode，路由即将加载的vue组件

2. 滚动行为

  • 记录某个组件的滚动距离，跳转到别的路由再返回时，自动滚动到刚才的位置
const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {	// savedPosition记录滚动的距离
    // return 期望滚动到哪个的位置
    // 有滚动就滚动到记录的位置，没有滚动就回到初始位置
    return savedPosition ? savedPosition : { left: 0, top: 0 };
  },
});

  • 为什么不能直接return savedPosition，如果vue中没有设置滚动条，savedPosition返回值是null，会报错

  • style="overflow: auto;"想要记录滚动位置，必须在当前的vue中添加该样式

    假设有父级的vue，两个子级的vue，想要在两个子级的vue中记录滚动行为，那么两个子级的vue必须都加上 style="overflow: auto;"；如果只在父级中加该样式，滚动是可以实现，但是savedPosition的值为null

  • 延时滚动

  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    return new Promise((resolve)=>{
      setTimeout(() => {
        resolve(savedPosition ? savedPosition : { left: 0, top: 0 });
      },1000)
    })
    // return savedPosition ? savedPosition : { left: 0, top: 0 };
  },

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

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

相关文章

C语言 | Leetcode C语言题解之第395题至少有K个重复字符的最长子串

C语言 | Leetcode C语言题解之第395题至少有K个重复字符的最长子串

题目&#xff1a; 题解&#xff1a; int longestSubstring(char* s, int k) {int ret 0;int n strlen(s);for (int t 1; t < 26; t) {int l 0, r 0;int cnt[26];memset(cnt, 0, sizeof(cnt));int tot 0;int less 0;while (r < n) {cnt[s[r] - a];if (cnt[s[r] - …
阅读更多...
Framework | 在Android中运行时获取顶层Activity并处理业务逻辑

Framework | 在Android中运行时获取顶层Activity并处理业务逻辑

Framework | 在Android中运行时获取顶层Activity并处理业务逻辑 在Android应用的开发中，有时需要获取当前正在运行的顶层Activity，尤其是当应用需要监控特定的页面或执行特殊的业务处理时，例如在截图界面进行操作或在特定的活动页面展示特定的功能。本文将详细介绍如何通过…
阅读更多...
中电金信：金融级数字底座“源启”：打造新型数字基础设施 筑牢千行百业数字化转型发展基石

中电金信：金融级数字底座“源启”：打造新型数字基础设施 筑牢千行百业数字化转型发展基石

近期&#xff0c;金融级数字底座“源启”登录中国电子《最轻大国重器》融媒体报道。从数字底座到数智底座&#xff0c;从金融行业到千行百业&#xff0c;“源启”用数智化转型的中国电子解决方案&#xff0c;为全球企业转型及安全发展提供强大动能。 立足中国电子科技创新成果&…
阅读更多...
英飞凌motor电机方案

英飞凌motor电机方案

电机主流方案的应用场景，一个是家电，一个是汽车，尤其是新能源汽车。 多家MCU厂商也都推出自己电机解决方案，比如华大电子： HC32M140 系列产品为华大半导体研制的 32bit 基于 ARM-Cortex M0+ 的 MCU，与传统的 CPU 内核相比，效率更高，功耗更低。更宽的工作电压范围，可同…
阅读更多...
C语言的结构体类型

C语言的结构体类型

在我们使用C语言进行编写代码时&#xff0c;常常会使用已经给定的类型来创建变量&#xff0c;比如int型&#xff0c;char型&#xff0c;double型等&#xff0c;而当我们想创建一些较为复杂的东西时&#xff0c;单单用一个类型变量是没办法做到的&#xff0c;比如我们想创建一个…
阅读更多...
图文讲解HarmonyOS应用发布流程

图文讲解HarmonyOS应用发布流程

HarmonyOS应用的开发和发布过程可以分为以下几个步骤&#xff1a;证书生成、应用开发、应用签名和发布。 1. 证书生成&#xff1a; 在开始开发HarmonyOS应用之前&#xff0c;首先需要生成一个开发者证书。开发者证书用于标识应用的开发者身份并确保应用的安全性。可以通过Har…
阅读更多...
R语言统计分析——功效分析3（相关、线性模型）

R语言统计分析——功效分析3（相关、线性模型）

参考资料&#xff1a;R语言实战【第2版】 1、相关性 pwr.r.test()函数可以对相关性分析进行功效分析。格式如下&#xff1a; pwr.r.test(n, r, sig.level, power, alternative) 其中&#xff0c;n是观测数目&#xff0c;r是效应值&#xff08;通过线性相关系数衡量&#xff0…
阅读更多...
LoRA: Low-Rank Adaptation Abstract

LoRA: Low-Rank Adaptation Abstract

LoRA: Low-Rank Adaptation Abstract LoRA 论文的摘要介绍了一种用于减少大规模预训练模型微调过程中可训练参数数量和内存需求的方法&#xff0c;例如拥有1750亿参数的GPT-3。LoRA 通过冻结模型权重并引入可训练的低秩分解矩阵&#xff0c;减少了10,000倍的可训练参数&#xf…
阅读更多...
HashMap常用方法及底层原理

HashMap常用方法及底层原理

目录 一、什么是HashMap二、HashMap的链表与红黑树1、数据结构2、链表转为红黑树3、红黑树退化为链表 三、存储&#xff08;put&#xff09;操作四、读取&#xff08;get&#xff09;操作五、扩容&#xff08;resize&#xff09;操作六、HashMap的线程安全与顺序1、线程安全2、…
阅读更多...
云计算实训49——k8s环镜搭建（续2）

云计算实训49——k8s环镜搭建（续2）

一、Metrics 部署 在新版的 Kubernetes 中系统资源的采集均使⽤ Metrics-server&#xff0c;可 以通过 Metrics 采集节点和 Pod 的内存、磁盘、CPU和⽹络的使⽤ 率。 &#xff08;1&#xff09;复制证书到所有 node 节点 将 master 节点的 front-proxy-ca.crt 复制到所有 No…
阅读更多...
Linux进阶命令-top

Linux进阶命令-top

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注作者&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 经过上一章Linux日志的讲解&#xff0c;我们对Linux系统自带的日志服务已经有了一些了解。我们接下来将讲解一些进阶命令&am…
阅读更多...
【计算机网络】初识网络

【计算机网络】初识网络

初识网络 初识网络网络的发展局域网广域网 网络基础IP地址端口号协议五元组协议分层OSI 七层模型TCP/IP五层模型封装和分用"客户段-服务器"结构 初识网络 网络的发展 在过去网络还没有出现的时候, 我们的计算机大部分都是独自运行的, 比如以前那些老游戏, 都是只能…
阅读更多...
Chainlit集成Langchain并使用通义千问实现文生图网页应用

Chainlit集成Langchain并使用通义千问实现文生图网页应用

前言 本文教程如何使用通义千问的大模型服务平台的接口&#xff0c;实现图片生成的网页应用&#xff0c;主要用到的技术服务有&#xff0c;chainlit 、 langchain、 flux。合利用了大模型的工具选择调用能力。实现聊天对话生成图片的网页应用。 阿里云 大模型服务平台百炼 API…
阅读更多...
1.SpringCloud与SpringCloud Alibaba

1.SpringCloud与SpringCloud Alibaba

SpringCloud与SpringCloud Alibaba主要讲解的内容&#xff1a; 备注&#xff1a;黑色部分是springcloud社区原版&#xff0c;红色的是SpringCloud Alibaba 服务注册与发现 Consul Alibaba Nacos 服务调用和负载均衡 LoadBalancer OpenFeign 分布式事务 Alibaba Seata 服务熔…
阅读更多...
批量插入insert到SQLServer数据库，BigDecimal精度丢失解决办法，不动代码，从驱动层面解决

批量插入insert到SQLServer数据库，BigDecimal精度丢失解决办法，不动代码，从驱动层面解决

概述 相信很多人都遇到过&#xff0c;使用sql server数据库&#xff0c;批量插入数据时&#xff0c;BigDecimal类型出现丢失精度的问题&#xff0c;网上也有很多人给出过解决方案&#xff0c;但一般都要修改应用代码&#xff0c;不推荐。 丢失精度的本质是官方的驱动有BUG造成…
阅读更多...
机器学习特征-学习篇

机器学习特征-学习篇

一、特征概念 1. 什么是特征 特征是事物可供识别的特殊的征象或标志 在机器学习中&#xff0c;特征是用来描述样本的属性或观测值的变量。它们可以是任何类型的数据&#xff0c;包括数字、文本、图像、音频等。 作用&#xff1a; 特征是训练和评估机器学习模型的基础。好的特…
阅读更多...
[基于 Vue CLI 5 + Vue 3 + Ant Design Vue 4 搭建项目] 09 集成 Ant Design Vue

[基于 Vue CLI 5 + Vue 3 + Ant Design Vue 4 搭建项目] 09 集成 Ant Design Vue

我们要将 Ant Design Vue 集成到项目中 1.首先进入到我们的项目 2.然后使用下面的命令 npm i --save ant-design-vue解释一下这个命令&#xff1a; npm&#xff1a;npm 命令 i&#xff1a;install 的简写 –save&#xff1a;将其保存到 pagckage.json ant-design-vue&am…
阅读更多...
PHP随时随地预订民宿酒店预订系统小程序源码

PHP随时随地预订民宿酒店预订系统小程序源码

随时随地预订&#xff0c;民宿酒店预订系统让旅行更自由&#xff01; &#x1f30d; 说走就走的旅行&#xff0c;从预订开始 旅行&#xff0c;总是让人心生向往&#xff0c;但繁琐的预订流程却常常让人望而却步。不过&#xff0c;现在有了“随时随地预订民宿酒店预订系统”&am…
阅读更多...
centos7安装MySQL5.7.44

centos7安装MySQL5.7.44

下载压缩文件 命令&#xff1a; #放到在/usr/local目录下 cd /usr/local #上传命令选择安装包 rz #解压缩包 tar -zxvf mysql-5.7.44-linux-glibc2.12-x86_64.tar.gz #给包重命名为mysql mv mysql-5.7.44-linux-glibc2.12-x86_64 mysql #查看mysql目录下有什么东西 [rootlocal…
阅读更多...
【Python 数据分析学习】Pandas基础与应用（1）

【Python 数据分析学习】Pandas基础与应用（1）

题目 1 Pandas 简介1.1 主要特征1.2 Pandas 安装 2 Pandas中的数据结构2.1 Series 数据结构和操作2.1.1 Series的数据结构2.1.2 Seres的操作 2.2 DataFrame 数据结构和操作2.2.1 DataFrame 数据结构2.2.2 Dataframe 操作2.2.3 DateFrame 的特殊操作 2.3 Series 和 DataFrame 的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023