探索Vue Router:构建高效单页面应用的指南

引言

Vue Router,作为Vue.js的官方路由管理器,为构建SPA提供了强大的支持

Vue Router 基础

Vue Router 的基本概念和作用

Vue Router 是一个用于构建单页面应用的 Vue.js 插件。它允许我们通过定义路由规则来将不同的 URL 映射到不同的组件,从而实现页面内容的动态渲染和切换,而不需要重新加载整个页面。Vue Router 提供了一种声明式的、嵌套路由配置方式,使得构建复杂的应用变得简单。

如何安装和配置 Vue Router

(操作起来比较繁琐,建议新手反复观看官方文档)

安装

Vue Router 可以通过 npm 或 yarn 进行安装(终端输入):

npm install vue-router
# 或者
yarn add vue-router
配置

安装完成后,你需要在 Vue 应用中引入并使用 Vue Router:

import Vue from 'vue';
import VueRouter from 'vue-router';Vue.use(VueRouter);

然后,创建一个 Router 实例,并定义路由规则:

const Foo = { template: '<div>foo</div>' };
const Bar = { template: '<div>bar</div>' };const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar }
];const router = new VueRouter({routes // (缩写)相当于 routes: routes
});

最后,创建和挂载根实例时,需要确保 router 配置到根实例中:

const app = new Vue({router
}).$mount('#app');
路由的基本使用

<router-link> 是一个组件,用于创建导航链接,类似于 HTML 中的 <a> 标签。<router-link> 的 to 属性用于指定目标路由的路径。

<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

<router-view> 是一个组件,它用于渲染匹配当前路由的组件。当路由变化时,<router-view> 会根据路由规则动态地加载对应的组件。

<router-view></router-view>

在定义了路由和组件后,当用户点击 <router-link> 导航时,<router-view> 会渲染对应的组件。例如,当用户点击 “Go to Foo” 时,<router-view> 会渲染 Foo 组件。

动态路由匹配

使用动态路径参数来定义路由

动态路径参数以冒号 : 开头,它们类似于正则表达式的占位符,用于捕获 URL 的一部分。例如,如果我们有一个用户个人资料页面的路由,我们可以这样定义它:

const User = {template: '<div>User {{ $route.params.id }}</div>'
};const router = new VueRouter({routes: [// 动态路径参数以冒号开始{ path: '/user/:id', component: User }]
});

在这个例子中,任何形式的 /user/x 都会映射到同一个路由,其中 x 可以是任何值。当匹配到路由时,x 的值会被存储在 $route.params.id 中。

获取路由参数和查询参数

路由参数

在组件内部,我们可以通过 $route.params 对象来访问路由参数。例如,在上述的 User 组件中,我们可以通过 this.$route.params.id 来获取用户 ID。

查询参数

查询参数是 URL 中的键值对,通常用于搜索、过滤等场景。它们位于 URL 的 ? 之后,多个参数之间用 & 分隔。例如,/user?id=123&name=alice。在 Vue Router 中,我们可以通过 $route.query 对象来访问这些参数。

例如,在组件中:

this.$route.query.id; // 获取 id 参数
this.$route.query.name; // 获取 name 参数

完整的例子

假设我们有一个商品详情页面的路由,我们希望通过路径参数传递商品 ID,并通过查询参数传递页码和排序方式:

const Product = {template: `<div>商品 ID: {{ $route.params.id }}<br>页码: {{ $route.query.page }}<br>排序方式: {{ $route.query.sort }}</div>`
};const router = new VueRouter({routes: [{ path: '/product/:id', component: Product }]
});

 说了这么多,肯定会有小伙伴对路由参数和查询参数傻傻分不清,让我们详细讲讲

由参数和查询参数异同与各自优势

路由参数

路由参数是定义在路由路径中的动态部分,通常用于表示 URL 的一个固定部分,它们是 URL 结构的一部分,用于区分不同的路由。

优势:
  • 明确性:路由参数通常用于唯一标识一个资源,如用户 ID、产品 ID 等,它们是 URL 的固有部分,明确表示了资源的定位。
  • 结构化:路由参数有助于保持 URL 的结构化和清晰,使得 URL 更具可读性。
  • 可缓存:由于路由参数是 URL 的一部分,因此对于具有相同参数的请求,浏览器和历史记录可以更有效地缓存和管理。

查询参数

查询参数是键值对,通常用于提供对资源的额外过滤、排序或分页信息。它们通常出现在 URL 的 ? 之后,多个参数之间用 & 分隔。

优势:
  • 灵活性:查询参数可以包含任意数量的键值对,且可以随时添加或删除,而不影响 URL 的基本路径。
  • 非侵入性:查询参数不会影响 URL 的基本结构,因此可以用于任何路由,而不需要为每个参数组合定义新的路由。
  • 可变性强:查询参数非常适合用于搜索、筛选、分页等场景,因为这些操作通常需要根据用户输入或选择动态变化。
不同点
  • 位置:路由参数位于 URL 路径中,而查询参数位于 URL 的查询字符串中。
  • 用途:路由参数用于标识资源,查询参数用于提供资源的额外信息。
  • 访问方式:在 Vue Router 中,路由参数通过 $route.params 访问,查询参数通过 $route.query 访问。
  • 变化影响:改变路由参数通常会导致路由的变化,从而可能导致组件的重新渲染;而改变查询参数通常不会导致路由的变化,但可以通过监听 $route.query 来更新组件的状态。

讲人话,经常要变化的就用query,不经常变化的就用params

编程式导航

这一块其实相对来讲难度并不大,相信同学们都学过英语吧

编程式导航是 Vue Router 提供的一种通过编码方式实现路由跳转的方法。它允许你在 JavaScript 代码中直接调用路由实例的方法来改变当前路由。这种方法非常灵活,因为它可以在任何地方触发导航,包括按钮点击事件、异步操作完成之后,或者在某些条件逻辑中。

this.$router.push()

this.$router.push() 是最常用的编程式导航方法之一。它用于导航到不同的 URL,可以向历史记录中添加新的记录。这个方法接收一个目标位置作为参数,可以是字符串路径、对象形式的路径或者命名的路由。

示例:
// 字符串路径
this.$router.push('/home');// 对象形式
this.$router.push({ path: '/home' });// 命名路由,假设有一个名为 `home` 的路由
this.$router.push({ name: 'home' });// 带查询参数,结果是 /register?plan=private
this.$router.push({ path: '/register', query: { plan: 'private' } });

this.$router.replace()

this.$router.replace() 用于导航到一个新的 URL,但是它不会向历史记录中添加新的记录,而是替换掉当前的记录。当你不想让用户通过浏览器的后退按钮回到上一个页面时,这个方法非常有用。

示例:
// 字符串路径
this.$router.replace('/home');// 对象形式
this.$router.replace({ path: '/home' });// 命名路由,假设有一个名为 `home` 的路由
this.$router.replace({ name: 'home' });// 带查询参数,结果是 /register?plan=private
this.$router.replace({ path: '/register', query: { plan: 'private' } });

this.$router.go()

this.$router.go() 允许你在历史记录中前进或后退。这个方法的参数是一个整数,表示前进或后退的步数。

示例:
// 前进 3 步
this.$router.go(3);// 后退 1 步
this.$router.go(-1);// 前进或后退到特定的历史记录,比如前进到第 3 个记录
this.$router.go(3);

注意事项

在使用编程式导航时,应当注意避免重复导航到同一个路由,因为这可能会导致一些问题,比如无限循环。通常,你可以在导航前检查当前路由是否已经是目标路由,或者使用 replace 方法来避免添加新的历史记录。

Vue Router 进阶

动态添加和替换路由

在 Vue Router 中,你可以通过编程的方式动态地添加或替换路由。这通常在应用运行时根据某些条件动态加载新路由时使用。

动态添加路由

你可以使用 addRoute 或 addRoutes 方法来动态添加路由。

const router = new VueRouter({// ... 初始路由配置
});// 添加新的路由
router.addRoute({path: '/new-page',component: NewPage
});// 添加多个路由
router.addRoutes([{ path: '/another-page', component: AnotherPage },{ path: '/third-page', component: ThirdPage }
]);
动态替换路由

使用 replace 方法可以动态替换当前路由,而不会添加到历史记录中。

router.replace({ path: '/new-page' });

动态添加和替换路由的注意事项

  • 动态添加的路由在应用启动时可能不会立即生效,除非你明确地调用 router.addRoutes()
  • 动态替换的路由会立即替换当前路由,但不会添加到历史记录中。
  • 动态添加或替换路由时,确保你的应用逻辑正确,以避免不必要的路由冲突或导航错误。

 两种URL 模式

1. 历史模式(History Mode)

历史模式(history)的 URL 看起来像传统的服务器端渲染的网站,不包含 #。这种模式下,URL 类似于 http://example.com/user/123,而不是 http://example.com/#/user/123

  • 优点

    • 更美观的 URL。
    • 更符合用户预期,看起来更像传统网站的 URL。
    • 更好的搜索引擎优化(SEO),因为搜索引擎通常不索引 # 后面的内容。
  • 缺点

    • 需要服务器配置支持。如果服务器不支持,你可能需要对 URL 进行重写。
    • 浏览器的前进和后退按钮可能不会按预期工作,因为 pushState 和 replaceState API 可能会影响它们的行为。
2. 哈希模式(Hash Mode)

哈希模式(hash)的 URL 包含 #,如 http://example.com/#/user/123。这种模式下,# 后面的内容不会被发送到服务器。

  • 优点

    • 不需要服务器配置支持。
    • 浏览器的前进和后退按钮通常会按预期工作,因为 # 后面的内容不会被发送到服务器。
  • 缺点

    • 更丑陋的 URL。
    • SEO 效果可能较差,因为搜索引擎通常不索引 # 后面的内容。

总结

Vue Router 是 Vue.js 的官方路由管理器,为构建单页面应用(SPA)提供支持。它通过定义路由规则,将 URL 映射到不同的组件,实现页面内容的动态渲染和切换,而无需重新加载页面

还是建议大家多看看官方文档:安装 | Vue Router

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

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

相关文章

1023记录

米哈游二面 自动化测试中自动化驱动的能力&#xff1f; pytest的驱动能力&#xff1a; 1&#xff0c;自动发现测试用例&#xff1a;以"test_"开头的Python文件、以"Test"开头的类和以"test_"开头的函数&#xff0c;将它们识别为测试用例 2&…

植物大战僵尸融合版最新版1.0下载及安装教程

《植物大战僵尸融合版》最新版1.0已经发布&#xff0c;为粉丝们带来了全新的游戏体验。这个版本由B站UP主蓝飘飘fly精心打造&#xff0c;引入了创新的植物融合玩法&#xff0c;让玩家可以享受策略和创意的结合。以下是游戏的详细介绍和安装指南&#xff1a; 游戏特色介绍 全新…

基于深度学习的图像背景剔除

在过去几年的机器学习领域&#xff0c;我一直想打造真正的机器学习产品。 几个月前&#xff0c;在参加了精彩的 Fast.AI 深度学习课程后&#xff0c;似乎一切皆有可能&#xff0c;我有机会&#xff1a;深度学习技术的进步使许多以前不可能实现的事情成为可能&#xff0c;而且开…

Java--继承

1.继承的本质是对某一批类的抽象&#xff0c;从而实现对世界更好的建模 2.extends的意思是“扩展”&#xff0c;子类是父亲的扩展 3.Java中只有单继承&#xff0c;没有多继承 4.继承关系的两个类&#xff0c;一个为子类&#xff08;派生类&#xff09;&#xff0c;一个为父类…

QML-Grid和OpacityMask

一个格子条&#xff0c;点击缩短 import QtQuick 2.0 import QtQuick.Window 2.12 import QtQuick.Controls 2.5 //导入 import QtGraphicalEffects 1.12Window {id:windowwidth: 600height: 500color: "white"visible: trueGrid {visible: falseid:gridwidth:405he…

STAR 命令参数解释

以这个为例子解释STAR参数含义 STAR 命令参数解释 STAR \ --outFilterType BySJout \ --runThreadN 8 \ --outFilterMismatchNmax 2 \ --genomeDir <hg19_STARindex> \ --readFilesIn <un_aligned.fastq> \ --outFileNamePrefix <HEK293> \ --outSAMtype B…

欧科云链大咖对话:Web3原生创新静默期,科技巨头却在两极化发展

出品&#xff5c;OKG Research 作者&#xff5c;Hedy Bi 上周末&#xff0c;欧科云链研究院接受FT中文的邀请&#xff0c;作为圆桌嘉宾参与了由FT中文网与上海交通大学上海高级金融学院联合主办的金融大师课。在圆桌环节&#xff0c;笔者与各位教授和金融行业科技创新前沿实践…

案例精选 | 聚铭网络助力南京市玄武区教育局构建内网日志审计合规体系

南京市玄武区教育局作为江苏省教育领域的先锋机构&#xff0c;其工作重点涵盖了教育政策的实施、教育现代化与信息化的融合、教育资源的优化、教育质量的提升以及教育公平的促进。在这一背景下&#xff0c;网络安全管理成为了确保教育信息化顺利推进的关键环节之一。 根据玄武…

Nacos单机部署、集群部署以及Nacos默认持久化derby数据库和配置mysql数据库

1. Nacos Windows 下载 1.1 去nacos官网下载nacos-server 发布历史 | Nacos 官网https://nacos.io/download/release-history/ 下载版本为 nacos-server-2.3.1.zip 2. Derby数据库 2.1 默认使用Derby数据库 官网下载Derby数据库即可。 Apache Derby数据库https://db.apac…

昇思25天学习打卡营第9天|MindSpore使用静态图加速(基于context的开启方式)

在Graph模式下&#xff0c;Python代码并不是由Python解释器去执行&#xff0c;而是将代码编译成静态计算图&#xff0c;然后执行静态计算图。 在静态图模式下&#xff0c;MindSpore通过源码转换的方式&#xff0c;将Python的源码转换成中间表达IR&#xff08;Intermediate Repr…

VSCode远程服务器

一、安装VSCode Windows安装Visual Studio Code(VS Code)-CSDN博客 二、VSCode中安装Remote-SSH插件 1、在应用商店中搜索Remote - SSH并安装 2、安装后会出现下面标注的图标 三、开始SSH连接 1、点击加号&#xff0c;创建SSH连接 2、输入地址&#xff0c;格式是&#xff1a;…

服务器部署 tomcat mysql nginx配置安装

一、安装配置tomcat 下载并解压 Tomcat 首先,从 Apache Tomcat 官方网站下载最新版本的 Tomcat。以 Tomcat 9 为例:下载慢的话,也可以本地上传到root目录下进行解压 sudo wget https://dlcdn.apache.org/tomcat/tomcat-9/v9.0.58/bin/apache-tomcat-9.0.58.tar.gz sudo tar …

文件打开的系统错误分析流程

当用户出现“Open file failed”错误时&#xff0c;手动产生dump文件。 &#xff08;1&#xff09;打开资源管理器&#xff0c;选择AppNameXXX.exe进程&#xff0c;右击鼠标选择“创建转储文件” (2) 生成转储文件 3.获取用户转储文件 4.用Visual studio2015打开dump文件分析…

人工智能系列-numpy(三)

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 副本和视图 副本 副本是一个数据的完整的拷贝&#xff0c;如果我们对副本进行修改&#xff0c;它不会影响到原始数据&#xff0c;物理内存不再同一位置。副本一般发生在Pytho…

MySQL——statement对象详解

JDBC中的statement对象用于向数据库发送SQL语句&#xff0c;想完成对数据库的增删改查&#xff0c;只需要通过这个对象向数据库发送增删改查语句即可。 Statement对象的executeUpdate方法&#xff0c;用于向数据库发送增、删、改的sql语句&#xff0c;executeUpdate执行完成后…

Vue前端打包

关于NGINX 介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少&#xff0c;并发能力强&#xff0c;在各大型互联网公司都有非常广泛的使用。 NGiMx 官网:https://nginx.org/ conf 配置文件目录 html静态资源文件目录 lo…

华为OD面试分享18

2024年OD统一考试(D卷)完整题库:华为OD机试2024年最新题库(Python、JAVA、C++合集) 正文开始 7月3日上午一面 问项目 String变量直接引用和new一个String变量的区别 谈谈多线程 canel的工作原理 MVC的执行过程 redis怎么用的 编程题-网络连通区域数量 7月3日晚上二面 编程…

html+js+css在线倒计时

代码在图片后面 点赞加关注 谢谢大佬照顾&#x1f61c; 图例 时间到前 时间到后 源代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width,…

10.09面试题目记录

艾融软件 - 线上面试题 排序算法的时间复杂度 O(n^2&#xff09;&#xff1a;冒泡&#xff0c;选择&#xff0c;插入 O(logn&#xff09;&#xff1a;折半插入排序 O(nlogn)&#xff1a;希尔&#xff0c;归并&#xff0c;快速&#xff0c;堆 O(nk)&#xff1a;桶&#xff0c;…

ListView 的简单使用及 ArrayAdapter 中参数详解

&#x1f604;作者简介&#xff1a; 小曾同学.com,一个致力于测试开发的博主⛽️&#xff0c;主要职责&#xff1a;测试开发、CI/CD&#xff0c;日常还会涉及Android开发工作。 如果文章知识点有错误的地方&#xff0c;还请大家指正&#xff0c;让我们一起学习&#xff0c;一起…