Vue-Router的使用详解

最新推荐文章于 2025-03-27 18:38:54 发布
最新推荐文章于 2025-03-27 18:38:54 发布
阅读量1k 收藏 10
点赞数 6
分类专栏： Vue2&Vue3 文章标签： vue-router 前端渲染 前端路由 vue路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47529373/article/details/118547646
版权
本文详细介绍了Vue-Router的使用，包括认识路由、基本使用、动态路由、路由懒加载、路由嵌套、路由守卫等内容。重点讲解了前端渲染与前端路由的概念，以及如何配置和操作路由，如使用router-link和router-view，动态添加和删除路由，以及应用路由守卫进行页面跳转控制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue-Router的使用详解

认识路由

渲染 & 路由

后端渲染 & 前端渲染

  • 后端渲染：在浏览器内输入地址，浏览器就可以展示一个页面，而页面内容展示的数据在后台服务器那边就已经渲染好了，浏览器只需要对返回的HTML做一个渲染就行了。
  • 前端渲染：在浏览器内输入地址，浏览器返回的是一些静态资源文件，内容里面的数据，由浏览器执行脚本，向服务器发送请求，浏览器拿到数据后，浏览器再渲染的页面上。

后端路由 & 前端路由

  • 后端路由：URL(唯一资源地址符)，一个URL对应一个页面，浏览器地址栏的地址由服务器(后端)来处理URL和页面之间的映射关系。
  • 前端路由：URL和页面之间的映射关系由前端来处理。

URL的hash & HTML5的History

URL的hash

  • url的hash(锚点 # )：
了解本专栏 订阅专栏 解锁全文 超级会员免费看
【vue-router源码】十二、useRoute、useRouter、useLink源码分析
MAXLZ的博客
06-13 2204
【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。该篇文章将分析useRoute、useRouter、useLink的实现。
vue-router 路由详解
大学生小郑的博客
07-21 1437
vue-router 路由详解
vue vue3.x中vue-router
weixin_43294560的博客
02-14 770
import { useRouter, useRoute } from 'vue-router' import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router' import { RouterLink, useLink } from 'vue-router' 1、setup访问$router和$route export default { setup() { const router = useRouter()
vue3中，route4，获取当前页面路由的问题
最新发布
codeFly
03-27 412
总之注意引入顺序，应先引入useRoute再引入router.js。要不然获取不到本页路径。
【Vue Router】017-扩展 RouterLink*
訾博（ZiBo）的博客
01-03 536
1.17 扩展 RouterLink* 1.17.1 概述 RouterLink 组件提供了足够的 props 来满足大多数基本应用程序的需求，但它并未尝试涵盖所有可能的用例，在某些高级情况下，你可能会发现自己使用了 v-slot。在大多数中型到大型应用程序中，值得创建一个（如果不是多个）自定义 RouterLink 组件，以在整个应用程序中重用它们。例如导航菜单中的链接，处理外部链接，添加 inactive-class 等。 1.17.2 扩展 RouterLink 让我们扩展 RouterLink 来
vue路由vue-router详解
局外人LZ的博客
04-01 1139
Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用程序（SPA）。它允许你在 Vue 应用中实现客户端端的路由功能，通过管理应用的不同视图之间的导航和状态。以下是 Vue Router 的一些主要特点和功能：1.声明式路由配置：Vue Router 允许你使用声明式的方式定义应用的路由规则，将路径映射到组件。2.嵌套路由：你可以定义嵌套路由，使得不同级别的路由可以对应不同的组件，从而构建复杂的页面结构。
vue-router 如何实现支持外部链接
Five—菜鸟级的博客
04-18 9295
vue-router 扩展 自动跳转外链
vue-router 中 meta的用法详解
01-21
在使用Vue.js框架开发单页面应用（SPA）时，经常会利用vue-router插件来管理页面的路由。在vue-router中，meta字段是路由对象的一个属性，用于添加自定义信息，比如权限控制、页面标题等。下面将详细介绍meta的用法...
Vue.js路由vue-router使用方法详解
01-19
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现...
Vue.js路由组件vue-router使用方法详解
12-29
使用Vue.js + vue-router 创建单页应用是非常简单的。只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染即可。 一、普通方式基本例子： <!DOCTYPE html> <html lang=en> <head> <...
vue-router实现tab标签页（单页面）详解
08-29
Vue Router 实现 Tab 标签页（单页面）详解 Vue Router 是 Vue.js 官方的路由插件，适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-router 会把...
十四、使用 Vue Router 开发单页应用（5）
走在bug的路上
12-10 1169
● 数据获取 ● Vue Roter 与组合 API ○ 在 setup() 函数中访问 Router 和当前路由 ○ 导航守卫 ○ useLink ● 滚动行为
Vue Router 4【实用教程】（2024最新版）vue3 路由管理
朝阳39的博客
07-23 1584
Vue Router 是 Vue 官方的客户端路由解决方案，在单页应用 (SPA) 中，用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。 核心思想： 通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。 官网 https://router.vuejs.org/zh/guide/ 安装 通常创建 vue3 项目时，选择安装 Pinia 就会自动集成。 但若目前项目里没有，则按如下流程操作 npm install vue-router@4 新建文件 s
vue3 vue-router使用详解
热门推荐
蓑笠翁
06-17 2万+
vue3引入router详解，vue3+typescript使用Vue-Router包详解。
Vue - route路由（router-link、useRoute、useRouter）
2302_81312344的博客
12-11 2247
为了避免反复在 app.vue 中去修改引入的路径，当用了新的页面，想切换回老页面的时候，都需要去手动改变路径，那么有没有一种可能，可以在一个地方，把这些组件配置好，然后通过不同的路径，就去访问不同的组件呢？vue router就提供了这个功能，翻译一下，router：路由，vue router， vue的路由。
VueUse中的这5个函数，也太好用了吧
粉丝们务必加入微信粉丝群
08-11 5920
作者：Matt Maribojoc 译者：前端小智 来源：medium 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。 VueUse 是 Anthony Fu 大佬的一个开源项目，它为Vue的开发者提供了大量用于 Vue2 和Vue3 的基本 Composition API 实用工具函数。 它有几十个用于常见开发人员用.
Vue3 中 router 带来了哪些变化？
小生方勤
05-11 3454
作者:Leiyhttps://segmentfault.com/a/1190000022582928前言Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的...
vue的路由配置，router-link的使用
夭桃鸣鹿的博客
12-31 4593
在vue项目中使用router-link实现路由的跳转。 新建vue组件（在项目中建立以vue结尾的文件） 我在components文件下新建了home.vue和login.vue两个文件，两个文件中随便写点什么，有区别就行。 在index.js（router文件夹下的）配置路由信息 import Vue from 'vue' import Router from 'vue-route...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值