第V章-Ⅰ Vue3路由vue-router初识

第V章-Ⅰ Vue3路由vue-router初识

  • 安装
  • Vue路由基础
    • router-link 组件导航
    • router-view 路由出口
    • 单独导入关于路由的库文件
    • 定义路由组件
    • 定义路由规则对象
    • 创建router实例
    • 将路由对象挂载Vue实例上
    • redirect 路由重定向
    • 嵌套路由
  • 路由传参
    • params形式传参
    • query形式传参
    • params方式与query方式的区别
    • restful风格传参
  • 编程式路由
    • Params 形式传参
    • Query 形式传参
    • RESTful 风格传参
    • 通过wathc实现路由监听
    • 导航守卫
    • $route 和 $router 的区别

安装

npm

npm install vue-router@4

yarn

yarn add vue-router@4

Vue路由基础

router-link 组件导航

是 Vue Router 提供的一个组件,用于用户界面中的导航。使用 .to 属性指定导航的目标地址。

<router-link to="/about">About</router-link>

router-view 路由出口

组件是一个容器,它渲染当前路由匹配的组件。每当路由改变时, 加载并显示相应的组件。

<router-view></router-view>

单独导入关于路由的库文件

Vue Router 需要单独安装并导入到你的 Vue 项目中。

import { createRouter, createWebHistory } from 'vue-router';

定义路由组件

路由组件就像任何其他 Vue 组件,但它们通常与路由路径关联。

<template><div>Home Page</div>
</template>

定义路由规则对象

每个路由规则映射到一个组件。

const routes:Array<RouteRecordRaw>=[{path:'/',name:'home',component:Home}
];

创建router实例

使用 createRouter 方法创建路由实例。

const router = createRouter({history: createWebHistory(),routes
});

将路由对象挂载Vue实例上

在创建 Vue 应用实例时使用 .use() 方法安装路由。

import { createApp } from 'vue';
import App from './App.vue';createApp(App).use(router).mount('#app');

redirect 路由重定向

在路由规则中可以设置重定向,通常用于将用户从一个路径自动导向另一个路径。

{ path: '/home', redirect: '/' }

嵌套路由

嵌套路由允许你构建更复杂的用户界面结构,其中一个组件内部包含多个 。

const routes: Array<RouteRecordRaw> = [{ path: '/user/:id',component: User,children: [{path: 'profile',component: UserProfile},{path: 'posts',component: UserPosts}]}
];

路由传参

params形式传参

使用动态路由匹配传递参数,参数作为路径的一部分。

{ path: '/user/:id', component: User }

query形式传参

使用 URL 的查询字符串传递参数。

<router-link :to="{ path: '/search', query: { q: 'keyword' }}">Search</router-link>

访问:/search?q=keyword。

params方式与query方式的区别

params:参数视为 URL 的一部分,不出现在 URL 查询字符串中,必须由路由路径定义。
query:参数以 ? 开始的形式附加在 URL 后,不需要在路由路径中定义。

restful风格传参

RESTful 风格的传参通常使用 params 方式,参数是 URL 的一部分,适用于表示资源层级结构。

{ path: '/api/user/:userId/book/:bookId', component: Book }

编程式路由

编程式路由指的是使用 JavaScript 来控制路由跳转,而不是通过声明式的 标签。这允许更加动态和条件性的导航逻辑。

  • router.push(location, onComplete?, onAbort?):导航到一个不同的 URL。行为类似于点击一个 。这是前进到一个新的历史记录。
  • router.replace(location, onComplete?, onAbort?):跟 push 类似,不同的是,它不会留下历史记录。
  • router.go(n):在历史记录中前进或后退多少步,类似 window.history.go(n)。
// useNavigation.ts
import { useRouter } from 'vue-router';export default function useNavig ation() {const router = useRouter();const goToHome = () => {router.push('/home');};const replaceWithAbout = () => {router.replace('/about');};const goBack = () => {router.go(-1);};return { goToHome, replaceWithAbout, goBack };
}

Params 形式传参

// router.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import UserProfile from '@/components/UserProfile.vue';const routes: Array<RouteRecordRaw> = [{path: '/user/:userId', // :userId 是动态部分component: UserProfile}
];const router = createRouter({history: createWebHistory(),routes
});export default router;import { useRouter } from 'vue-router';export default function useUserProfileNavigation() {const router = useRouter();const goToUserProfile = (userId: string) => {router.push({ name: 'user', params: { userId } }); // 确保路由名称或路径匹配};return { goToUserProfile };
}

Query 形式传参

import { useRouter } from 'vue-router';export default function useSearchNavigation() {const router = useRouter();const searchItems = (keywords: string) => {router.push({ path: '/search', query: { q: keywords } });};return { searchItems };
}

RESTful 风格传参

RESTful 风格的 params 传参本质上和普通的 params 传参没有区别,都是将参数作为 URL 的一部分。区别在于 RESTful 风格强调资源的表达方式更为清晰和直观。通常,在设计 API 和路由时采用 RESTful 风格。

通过wathc实现路由监听

在 Vue 3 中,你可以使用 watch 来监听路由变化,这对于依赖于路由状态的应用特别有用。例如,你可能需要根据路由参数加载数据。

// useRouteWatcher.ts
import { watch } from 'vue';
import { useRoute } from 'vue-router';export default function useRouteWatcher() {const route = useRoute();watch(() => route.params, (newParams, oldParams) => {console.log('Route changed', newParams);}, { deep: true });
}

导航守卫

导航守卫是一种特别有用的路由控制技术,允许你在路由发生变化之前执行逻辑,比如权限验证、数据预加载等。

// 在router/index.js中设置
import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router';router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {if (to.meta.requiresAuth && !isAuthenticated()) {next({ path: '/login' });} else {next();}
});

$route 和 $router 的区别

  • $route:是一个“路由信息对象”,包含了如路径、查询参数(query)、路由参数(params)等路由信息。
  • $router:是 Vue Router 的实例,可以用它来进行编程式的导航(如 router.push)。
// 例如,在一个组件中
import { useRoute, useRouter } from 'vue-router';export default function useCheckDetails() {const route = useRoute();const router = useRouter();const checkDetails = () => {const id: string = route.params.id as string;router.push(`/details/${id}`);};return { checkDetails };
}

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

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

相关文章

Leetcode—1991. 找到数组的中间位置【简单】

2024每日刷题&#xff08;129&#xff09; Leetcode—1991. 找到数组的中间位置 实现代码 class Solution { public:int findMiddleIndex(vector<int>& nums) {int sum accumulate(nums.begin(), nums.end(), 0);int prefix 0;for(int i 0; i < nums.size();…

考情分析 | 2025年西北工业大学计算机考研考情分析!

西北工业简称西工大&#xff08;英文缩写NPU&#xff09;&#xff0c;大学坐落于古都西安&#xff0c;是我国唯一一所以同时发展航空、航天、航海工程教育和科学研究为特色&#xff0c;以工理为主&#xff0c;管、文、经、法协调发展的研究型、多科性和开放式的科学技术大学。十…

代码随想录-算法训练营day33【贪心算法03:K次取反后最大化的数组和、加油站、分发糖果】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第八章 贪心算法 part03● 1005.K次取反后最大化的数组和 ● 134. 加油站 ● 135. 分发糖果 详细布置 1005.K次取反后最大化的数组和 本题简单一些&#xff0c;估计大家不用想着贪心 &#xff0c;用自己直觉也会有…

怎么制作好玩的gif?试试这个工具轻松制作

视频之所以受大众的喜爱是因为有声音、画面的搭配&#xff0c;让观者深入其中体验感会更强。但是视频的体积较大、时长也比较长&#xff0c;给我们的传播和保存造成了一定的影响。那么&#xff0c;我们可以将视频制作成gif图片来使用&#xff0c;不需要下载软件&#xff0c;使用…

最大数字——蓝桥杯十三届2022国赛大学B组真题

问题分析 这道题属于贪心加回溯。所有操作如果能使得高位的数字变大必定优先用在高位&#xff0c;因为对高位的影响永远大于对低位的影响。然后我们再来分析一下&#xff0c;如何使用这两种操作&#xff1f;对于加操作&#xff0c;如果能使这一位的数字加到9则变成9&#xff0…

LeetCode-hot100题解—Day6

原题链接&#xff1a;力扣热题-HOT100 我把刷题的顺序调整了一下&#xff0c;所以可以根据题号进行参考&#xff0c;题号和力扣上时对应的&#xff0c;那么接下来就开始刷题之旅吧~ 1-8题见LeetCode-hot100题解—Day1 9-16题见LeetCode-hot100题解—Day2 17-24题见LeetCode-hot…

UE5自动生成地形一:地形制作

UE5自动生成地形一&#xff1a;地形制作 常规地形制作地形编辑器地形管理添加植被手动修改部分地形的植被 置换贴图全局一致纹理制作地貌裸露岩石地形实例 常规地形制作 地形制作入门 地形导入部分 选择模式&#xff1a;地形模式。选择地形子菜单&#xff1a;管理->导入 …

STC8增强型单片机开发——C51版本Keil环境搭建

一、目标 了解C51版本Keil开发环境的概念和用途掌握C51版本Keil环境的安装和配置方法熟悉C51版本Keil开发环境的使用 二、准备工作 Windows 操作系统Keil C51 安装包&#xff08;可以从Keil官网下载&#xff09;一款8051单片机开发板 三、搭建流程 环境搭建的基本流程&#xf…

思维导图网页版哪个好?2024年值得推荐的8个在线思维导图软件!

思维导图如今已成为一种常用的工具&#xff0c;帮助我们清晰地组织和整理信息。随着科技的发展&#xff0c;思维导图的产品形态也经过多轮迭代&#xff0c;从最初的本地客户端过渡到基于云的 Web 端&#xff0c;各类网页版思维导图软件应运而生&#xff0c;它们方便快捷&#x…

【Linux】gcc/g++的使用

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; Linux &#x1f389;其它专栏&#xff1a; C初阶 | C进阶 | 初阶数据结构 小伙伴们大家好&#xff0c;本片文章将会讲解Linux中gcc/g使用的相关内容。 如果看到最后您觉得这篇文章写得不错…

【Linux】CAN根据时钟频率、波特率计算采样点详解

1、采样点知识回顾 参考博客:【CAN】知识点:帧类型、数据帧结构、传输速率、位时间、采样点 CAN 采样点是指在一个数据位的传输周期内,接收器实际采样数据的时间点。这个时间点是以百分比来表示的,它决定了在数据位的传输周期中,何时读取数据位的值。 正确设置采样点对…

js api part3

环境对象 环境对象&#xff1a; 指的是函数内部特殊的 变量 this &#xff0c; 它代表着当前函数运行时所处的环境 作用&#xff1a; 弄清楚this的指向&#xff0c;可以让我们代码更简洁 函数的调用方式不同&#xff0c;this 指代的对象也不同 【谁调用&#xff0c; this 就是…

Qt | QLineEdit 类(行编辑器)

01、上节回顾 Qt | QComboBox(组合框)02、QLineEdit 1、QLineEdit 类是 QWidget 类的直接子类,该类实现了一个单行的 输入部件,即行编辑器,见右图 2、验证器(QValidator 类)和输入掩码简介:主要作用是验证用户输入的字符是否符合验证器 的要求,即限制对用户的输入,比…

【C#_变量_格式化输出_If语句_微信猜拳_第一篇】

C#&#xff08;编程入门&#xff09; 练习来自腾讯课堂免费课程1.1.基本输出语句基本输出语句——知识点总结Console.Clear();清屏字符串和数字区分Console.ReadLine(); 1.2.变量的基本使用&#xff1a;变量的基本使用——知识点总结 1.3.格式化输出格式化输出——知识点总结 1…

01 设计模式--单例模式

1. 单例模式 单例模式有两种实现方式&#xff1a; 1.1 饿汉模式&#xff08;Eager Initialization&#xff09;&#xff1a;在类加载时就创建单例实例&#xff0c;无论是否需要使用该实例。 饿汉模式在类加载时就创建单例实例&#xff0c;无论是否需要使用该实例。 饿汉模式…

C++ Primer 中文版(第 5 版)-第二单元

第二单元 练习 2.1 通过读下面程序&#xff0c;写出程序运行结果。 #include <iostream>int main() {unsigned u 10, u2 42;std::cout << u2 - u << std::endl;std::cout << u - u2 << std::endl;int i 10, i2 42;std::cout << i2 …

论文阅读_使用有向无环图实现流程工程_AgentKit

英文名称: AgentKit: Flow Engineering with Graphs, not Coding 中文名称: AgentKit&#xff1a;使用图而非编码进行流程工程 链接: https://arxiv.org/pdf/2404.11483.pdf 代码: https://github.com/holmeswww/AgentKit 作者: Yue Wu, Yewen Fan, So Yeon Min, Shrimai Prabh…

Julia 语言环境安装与使用

1、Julia 语言环境安装 安装教程&#xff1a;https://www.runoob.com/julia/julia-environment.html Julia 安装包下载地址为&#xff1a;https://julialang.org/downloads/。 安装步骤&#xff1a;注意&#xff08;勾选 Add Julia To PATH 自动将 Julia 添加到环境变量&…

ollama + autogen排雷

语法&#xff1a;<abc>代表参数&#xff0c;实际输入为具体的名字&#xff0c;不需要输入<> 注意&#xff1a;当前雷可能随着版本迭代更新掉 1、litellm -model ollama/<model> 启动后的url为&#xff1a;http://0.0.0.0:<port>&#xff0c;实际调用…

实用 Linux 操作指令

实用 Linux 操作指令 Linux 命令行提供了强大的功能&#xff0c;可以通过一系列指令轻松管理系统、文件和网络。以下是一些常用的 Linux 操作指令&#xff0c;涵盖文件管理、系统监控、网络配置等方面。 一、文件管理 显示当前目录&#xff1a; pwd列出目录内容&#xff1a; …