当前位置：首页 > news >正文

Vue 2 路由指南：从基础到高级

news 来源：原创 2025/5/10 4:41:47

注意：对于代码看不清的部分，用鼠标选中就能看到了，背景颜色和字体颜色过于接近，我也不知道怎么调，只能这样子先看着了

一、Vue Router 是什么？

Vue Router 是 Vue.js 官方的路由管理器，它允许你在单页面应用中通过不同的 URL 显示不同的组件。Vue Router 与 Vue.js 核心深度集成，提供了声明式的路由定义、嵌套路由、动态路由、导航守卫等功能，帮助开发者构建复杂的单页面应用。

二、安装与配置

1. 安装 Vue Router

在 Vue 2 项目中，可以通过 npm 或 yarn 安装 Vue Router：注意，vue2要安装3点几的版本

npm install vue-router@3.6.5
# 或者
yarn add vue-router@3.6.5

2. 创建路由实例

在项目中创建一个 router.js 文件，用于配置路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';// 使用 Vue Router
Vue.use(VueRouter);// 定义路由规则
const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
];// 创建路由实例
const router = new VueRouter({mode: 'history', // 使用 HTML5 历史模式routes
});export default router;

3. 在主文件中引入路由

在 main.js 中引入路由实例，并将其挂载到 Vue 实例上：

import Vue from 'vue';
import App from './App.vue';
import router from './router';new Vue({router,render: h => h(App)
}).$mount('#app');

三、基本用法

1. 使用 `<router-link>` 和 `<router-view>`

在 Vue 模板中，使用 <router-link> 创建导航链接，使用 <router-view> 显示当前路由对应的组件。

<template><div><h1>Vue Router 示例</h1><nav><router-link to="/">首页</router-link><router-link to="/about">关于</router-link></nav><router-view></router-view></div>
</template>

2. 动态路由

动态路由允许你在 URL 中传递参数。例如：

const routes = [{path: '/user/:id',name: 'User',component: User}
];

在组件中，可以通过 $route.params 获取参数：

<template><div><h2>用户详情</h2><p>用户 ID：{{ $route.params.id }}</p></div>
</template>

3. 嵌套路由

嵌套路由允许你在某个组件内部定义子路由。例如：

const routes = [{path: '/parent',component: Parent,children: [{path: 'child',component: Child}]}
];

在模板中，使用 <router-view> 显示子路由：

<template><div><h2>父组件</h2><router-view></router-view></div>
</template>

四、高级用法

1. 导航守卫

Vue Router 提供了导航守卫（Navigation Guards），可以在路由跳转前后执行一些逻辑。例如：

router.beforeEach((to, from, next) => {if (to.path === '/login') {next();} else {if (!isAuthenticated) {next('/login');} else {next();}}
});

2. 命名路由

为路由命名后，可以通过名称进行跳转：

const routes = [{path: '/about',name: 'About',component: About}
];

在模板中使用 <router-link>：

<router-link :to="{ name: 'About' }">关于</router-link>

3. 编程式导航

除了 <router-link>，还可以通过编程方式导航：

this.$router.push({ name: 'About' });

4. 路由懒加载

为了优化应用性能，可以使用路由懒加载：

const routes = [{path: '/about',name: 'About',component: () => import('../components/About.vue')}
];

Vue 2 路由指南：从基础到高级

注意：对于代码看不清的部分，用鼠标选中就能看到了，背景颜色和字体颜色过于接近，我也不知道怎么调，只能这样子先看着了一、Vue Router 是什么？ Vue Router 是 Vue.js 官方的路由管理器，它允许…...

编程日记 2025/5/10 4:41:47

2025最新深度学习pytorch完整配置：conda/jupyter/vscode

从今天开始，开始一个新的专栏，更新深度学习相关的内容，从入门到精通，首先的首先是关于环境的配置指南：工欲善其事必先利其器！ PyTorch 是由 Facebook（现 Meta）开发的开源深度学习框…...

编程日记 2025/5/5 23:40:19

Python教学-最常用的标准库之一——OS库

os 库是 Python 标准库中的一个模块，它提供了一种方便的方式来使用操作系统相关的功能。os 模块提供了很多函数，可以用来处理文件和目录、访问环境变量、执行系统命令等。以下是一些常用的 os 模块的功能和示例： 1. 文件和目录操作 1.1 当前…...

编程日记 2025/5/9 9:11:50

一、ajax的get请求 1. ajax的get请求—豆瓣电影第一页 # _*_ coding : utf-8 _*_ # Time : 2025/2/13 15:14 # Author : 20250206-里奥 # File : demo23_ajax的get请求 # Project : PythonProject10-14import urllib.requestfrom demo17_qingqiuduixaingdedingzhi import hea…...

编程日记 2025/5/9 3:02:04

LeetCode刷题---字符串---859

亲密字符串 859. 亲密字符串 - 力扣（LeetCode） 题目： 给你两个字符串 s 和 goal ，只要我们可以通过交换 s 中的两个字母得到与 goal 相等的结果，就返回 true ；否则返回 false 。交换字母的定义是&…...

编程日记 2025/5/5 2:58:45

探索大数据处理：利用 Apache Spark 解锁数据价值

探索大数据处理：利用 Apache Spark 解锁数据价值大家好，我是你们熟悉的大数据领域自媒体创作者Echo_Wish。今天，我们来聊聊如何利用Apache Spark进行大规模数据处理。Apache Spark作为一个快速、通用的集群计算框架，以其出色的性…...

编程日记 2025/5/5 8:39:03

伯克利 CS61A 课堂笔记 08 —— Strings and Dictionaries

本系列为加州伯克利大学著名 Python 基础课程 CS61A 的课堂笔记整理，全英文内容，文末附词汇解释。目录 01 Strings 字符串 Ⅰ Strings are An Abstraction. Ⅱ Strings Literals have Three Forms Ⅲ String are Sequences 02 Dictionaries 字典 …...

编程日记 2025/5/10 4:01:50

V93K测试机

爱德万V9300（又称V93K）是Advantest公司推出的高端可扩展SoC测试平台，在半导体测试领域具有标杆地位。以下为该设备的详细介绍： ### 一、核心性能与技术优势 1. **高速高精度测试能力** V9300支持高达112 Gbps PAM4信号&…...

编程日记 2025/5/5 6:06:01

在 CentOS 上更改 SSH 默认端口以提升服务器安全性

🚀 作者主页： 有来技术 🔥 开源项目： youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template 🌺 仓库主页： GitCode︱ Gitee ︱ Github 💖 欢迎点赞 👍 收藏 ⭐评论 …...

编程日记 2025/5/5 17:21:02

基于逻辑概率的语义信道容量（Semantic Channel Capacity）和语义压缩理论（Semantic Compression Theory）

基于逻辑概率的语义信道容量（Semantic Channel Capacity）和语义压缩理论（Semantic Compression Theory）是语义通信（Semantic Communication, SemCom）的核心研究方向，它们旨在优化通信效率&#…...

编程日记 2025/5/5 17:27:52

Golang GORM系列：GORM事务及错误处理

在数据库管理领域，确保数据完整性至关重要。GORM是健壮的Go对象关系映射库，它为开发人员提供了维护数据一致性和优雅地处理错误的基本工具。本文是掌握GORM事务和错误处理的全面指南。我们将深入研究如何使用事务来保证原子性，并探索有效处理…...

编程日记 2025/5/6 4:52:24

51单片机-C语言扩展及最小系统

1、C-51的数据类型扩充定义 sfr：特殊功能寄存器声明 sfr：变量名地址值； 特殊功能寄存器在reg51.H这个头文件里面都帮我们定义好了，所以平时我们就不要自己去定义寄存器的名字。 sbit：特殊功能位声明sbit 变量名地址…...

编程日记 2025/5/9 13:32:10

日常问题-pnpm install执行没有node_modules生成

日常问题-pnpm install执行没有node_modules生成 1.问题2.解决方法 1.问题执行pnpm i后，提示Scope: all 3 workspace projects Done in 503ms，而且没有node_modules生成。很奇怪 2.解决方法确保根目录有 pnpm-workspace.yaml 文件： 把这…...

编程日记 2025/3/20 14:49:00

FreeRTOS低功耗总结

前言 Cortex-M核的MCU一般支持以下三种低功耗方式： ● 睡眠(Sleep)模式 ● 停止(Stop)模式 ● 待机(Standby)模式睡眠模式进入睡眠模式有两种指令：WFI(等待中断)和WFE(等待事件)， WFI进入睡眠模式后，任意中断都可唤醒。 WFE进…...

编程日记 2025/5/7 7:49:45

UniApp 实现炫酷导航栏：选中图标上移并隐藏文字

在移动应用开发中，导航栏是用户与应用交互的重要组成部分，一个美观且交互性强的导航栏能大大提升用户体验。本文将详细介绍如何使用 UniApp 实现一个独特的导航栏，当用户选中某个导航项时，对应的图标会上移并隐藏文字，…...

编程日记 2025/5/9 14:40:13

Django 操作表中的数据（增删改查）

1.新建数据我之前已经在数据库中创建了两张表，如下在urls.py文件中添加一行代码，然后再在views.py文件中编写函数 （将 URL 路径 orm/ 映射到 Django 视图函数 views.orm，当用户访问 orm/ 时，Django 会调用 orm 视图…...

编程日记 2025/5/9 14:47:12

优选驾考小程序

第2章　系统分析 2.1系统使用相关技术分析 2.1.1Java语言介绍 Java语言是一种分布式的简单的开发语言，有很好的特征，在安全方面、性能方面等。非常适合在Internet环境中使用，也是目前企业级运用中最常用的一个编程语言，具有很大…...

编程日记 2025/5/9 14:26:29

vue开发06：前端通过webpack配置代理处理跨域问题

1.定义在浏览器尝试请求不同源（域名、协议、端口号不同）的资源时，浏览器的同源策略会阻止这种跨域请求。（比如前端端口15500，后端端口5050，前端界面不可以直接调用5050端口） 2.解决方案使用前…...

编程日记 2025/5/9 18:04:59

C++基础 | 线程`std::thread`

什么是std::thread？ std::thread是C11中引入的一个类，用于表示和管理线程。通过std::thread，我们可以创建一个新的线程来执行指定的任务。线程是操作系统调度的基本单位，多个线程可以并发执行，从而提高程序的效率。创…...

编程日记 2025/5/9 15:28:24

体验 DeepSeek-R1：解密 1.5B、7B、8B 版本的强大性能与应用

文章目录 🍋引言🍋DeepSeek 模型简介🍋版本更新：1.5B、7B、8B 的区别与特点🍋模型评估🍋体验 DeepSeek 的过程🍋总结 🍋引言随着大规模语言模型的持续发展，许多模型在性…...

编程日记 2025/5/7 9:52:52

2024年认证杯SPSSPRO杯数学建模A题(第二阶段)保暖纤维的保暖能力全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 A题保暖纤维的保暖能力原题再现： 冬装最重要的作用是保暖，也就是阻挡温暖的人体与寒冷环境之间的热量传递。人们在不同款式的棉衣中会填充保暖材料，从古已有之的棉花、羽绒到近年来各种各样的人造纤维。不…...

编程日记 2025/5/9 13:41:25

P1878 舞蹈课（详解）c++

题目链接：P1878 舞蹈课 - 洛谷 | 计算机科学教育新生态 1.题目解析 1：我们可以发现任意两个相邻的都是异性，所以他们的舞蹈技术差值我们都要考虑，4和2的差值是2，2和4的差值是2，4和3的差值是1，根…...

编程日记 2025/5/9 14:23:25

或非门组成的SR锁存器真值表相关问题

PS：主要是给大家抛砖引玉，不喜勿喷。问题描述：或非门组成的SR锁存器，为什么当SD和RD等于0时候的真值表一个是Q0，Q0.一个结果是Q1，Q1？...

编程日记 2025/5/9 15:01:48

机器学习算法 - 随机森林之决策树初探（1）

随机森林是基于集体智慧的一个机器学习算法，也是目前最好的机器学习算法之一。随机森林实际是一堆决策树的组合（正如其名，树多了就是森林了）。在用于分类一个新变量时，相关的检测数据提交给构建好的每个分类树。每个…...

编程日记 2025/5/9 15:22:34

webpack构建流程

文章目录 [TOC](文章目录) 运行流程初始化流程编译构建流程compile编译make 编译模块build module 完成模块编译输出流程seal输出资源emit输出完成小结运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来在运行过程中会广播事件，插件只…...

编程日记 2025/5/9 14:58:06

服务器之连接简介（Detailed Explanation of Server Connection）

一台服务器最大能支持多少连接？一台客户端机器最多能发起多少条连接？？ 我们知道TCP连接，从根本上看其实就是client和server端在内存中维护的一组【socket内核对象】（这里也对应着TCP四元组：源IP、源端口、…...

编程日记 2025/5/9 15:08:43

第1章大型互联网公司的基础架构——1.5 服务发现

讲到这里，我们已经对一个客户端请求进入业务HTTP服务的过程有了较为详细的了解。业务HTTP服务在处理请求的过程中免不了与其他下游服务通信——可能会调用其他业务服务，可能需要访问数据库，可能会向消息中间件投递消息等，所以业务…...

编程日记 2025/5/9 15:18:43

uniapp PDF 预览和下载

创建 index.vue <template><view><view class"box"><view class"item" ><view class"title"><span></span><text>文件</text></view><view class"list" v-for"(…...

编程日记 2025/5/9 7:49:33

ubuntu服务器部署

关闭欢迎消息服务器安装好 ubuntu 系统后，进行终端登录，会显示出很多的欢迎消息通过在用户的根目录下执行 touch .hushlogin 命令，再次登录终端就不会出现欢迎消息修改hostname显示修改 /etc/hostname 文件内容为主机名，保…...

编程日记 2025/5/9 14:40:13

Deepseek 本地部署

准备环境设备：家用笔记本电脑，8核/16G/1Tb SSD/无独显系统：windows10 软件环境（非源码部署不需要）：conda 4.8.5、python3.7、git2.13 步骤下载安装Ollama 下载地址：OllamaGet up and r…...

编程日记 2025/5/9 9:21:51

[Linux][问题处理]修改密码报You must wait longer to change your password

一、问题描述在Linux控制台中修改密码，键入旧密码，设置并确认新密码后，却提示You must wait longer to change your password（您必须等待更长时间才能更改密码） 二、原因当前修改时间 < Minimum number of da…...

编程日记 2025/5/9 14:52:27

《刚刚问世》系列初窥篇-Java+Playwright自动化测试-22- 操作鼠标拖拽 - 下篇（详细教程）

1.简介上一篇中，宏哥说的宏哥在最后提到网站的反爬虫机制，那么宏哥在自己本地做一个网页，没有那个反爬虫的机制，谷歌浏览器是不是就可以验证成功了，宏哥就想验证一下自己想法，其次有人私信宏哥说是有那种…...

编程日记 2025/5/9 14:09:16

SpringBoot3使用Swagger3

版本 springboot3.4.2 JAVA 17 一、引入Swagger3依赖 <dependency><groupId>org.springdoc</groupId><artifactId>springdoc-openapi-starter-webmvc-ui</artifactId><version>2.0.4</version> </dependency> 二、快速启…...

编程日记 2025/5/9 14:57:06

HCIA综合项目之多技术的综合应用实验

十五 HCIA综合实验 15.1 IP规划 #内网分配网段192.168.1.0 24#内网包括骨干链路和两个用户网段，素以需要划分三个，借两位就够用了192.168.1.0 26--骨干192.168.1.64 26---R1下网络192.168.1.128 26---R2下网络192.168.1.192 26--备用192.168.1.64 26--…...

编程日记 2025/5/9 14:25:29

燕千云ITSM已支持DeepSeek对接！AI能力持续升级

春节期间，DeepSeek火爆全网，引发热议，作为国产AI大模型的黑马，DeepSeek凭借独特的训练方法、先进的模型架构和强大的联网推理能力，正不断拓展AI技术的应用边界。其“快思考”能力，可在极短时间内完成复杂决…...

编程日记 2025/5/9 14:06:05

Windows 自动主题：Windows AutoTheme

Windows 自动主题：Windows AutoTheme 链接：https://pan.xunlei.com/s/VOJ2ZG5t8QjL7_fGVIBgyxJQA1?pwdgbie# 自动切换：根据日出、日落时间自动切换 Windows 主题模式。高效轻量：使用 Rust 提供高效的系统调用，保证运…...

编程日记 2025/5/9 15:23:34

自定义Spring Cloud Gateway过滤器：记录慢请求

在构建微服务架构时，API网关是一个关键组件，它负责路由、负载均衡、安全验证等多种功能。Spring Cloud Gateway提供了强大的扩展能力，允许开发者通过自定义过滤器来增强其功能。本文将详细介绍如何实现一个自定义过滤器，用于记录响…...

编程日记 2025/5/9 16:15:15

python 浅拷贝和深拷贝

浅拷贝（Shallow Copy）语法示例代码 1示例代码 2 深拷贝（Deep Copy）语法示例代码浅拷贝与深拷贝的区别示例：浅拷贝与深拷贝的对比浅拷贝：只复制外层容器，内层嵌套对象仍然是共享的，…...

编程日记 2025/5/9 14:42:49

uni-app 学习（一）

一、环境搭建和运行 （一）创建项目直接进行创建 （二）项目结构理解 pages 是页面静态资源打包文件，看我们想输出成什么格式 app.vue 页面的入口文件 main.js 是项目的入口文件存放对打包文件的配置 pages 存放整…...

编程日记 2025/5/9 15:25:25

unity学习37：新版的动画器：动画状态机 Animator

目录 1 给游戏物体添加，新版的动画器 Animator 2 关于 Animator 3 创建动画器的控制器 Animator Controller 4 打开动画编辑器 Animator 5 动画编辑器还是Animation 5.1 创建新的动画 5.2 创建第2个动画 5.3 测试2个动画均可用 6 再次打开动画编辑器 A…...

编程日记 2025/5/9 13:47:31

FFmpeg+SDL实现简易视频播放器

参考链接 https://blog.csdn.net/qq_26611129/article/details/98732561 https://www.cnblogs.com/Azion/p/17756274.html https://avmedia.0voice.com/?id49050 https://blog.csdn.net/qq_44825209/article/details/133760652 https://www.cnblogs.com/Azion/p/17525955.htm…...

编程日记 2025/5/9 14:14:28