Vue3的vue-router路由详解

最新推荐文章于 2024-09-27 20:41:36 发布
最新推荐文章于 2024-09-27 20:41:36 发布
阅读量616 收藏
点赞数
分类专栏： 面试 学习路线 阿里巴巴 文章标签： vue.js webpack javascript 职场和发展 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54866636/article/details/124834371
版权
本文深入解析Vue3中的vue-router路由配置，包括安装依赖、定义路由组件、创建路由实例以及启动服务后的效果。通过示例展示了如何创建Main、Lists、Details三个路由组件，并介绍如何映射路由路径和挂载组件。
摘要由CSDN通过智能技术生成

这篇文章是接着【三分钟快速搭建Vue3+webpack项目】的内容做的开发，有基础的可以跳过【三分钟快速搭建Vue3+webpack项目】，直接看以下的内容。

Vue3的vue-router路由详解：

首先安装路由依赖模块：

npm install vue-router@4

所需代码文件如下图：
图1

aac4421b71344dc0931439f78dc83889.png

所需要的主要文件：index.html、index.js、App.vue

index.html：模板页面，项目中的代码编译之后都是放入到模板页面中id为app的元素这种。
代码如下：

<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="utf-8">
? ? <meta name="viewport" content="width=device-width
最低0.47元/天 解锁文章
良月生秋
关注
专栏目录
「Vue3系列」Vue3 路由
日常笔记/总结/系列知识梳理
03-06 1280
路由元信息（Route Meta）允许你在路由配置中定义一些自定义信息，这些信息可以在路由守卫（Navigation Guards）或其他地方使用。Vue Router 提供了许多高级功能，包括路由元信息配置、嵌套路由和动态路由匹配。嵌套路由允许你创建一个多级导航结构，你可以在一个路由内部定义子路由。动态路由匹配允许你定义可变的 URL 部分，用于匹配不同的参数。提供了一些属性来定制链接的行为和外观。事件，并阻止其默认行为（即阻止页面跳转），除非。默认的标签，如果指定了的话）。在 Vue 3 中，
Vue3 - 路由 Vue-router 4.X（配置与使用教程）
王佳斌
11-30 4027
vue3 路由官方文档，vue3 路由文档，vue-router4 官方文档，使用Vite构建Vue3项目,对路由Vue Router，Vue3中 Vue Router4路由的配置，vue3-vueRouter v4.x， vue3 中 vue-router4 基本使用(路由基本配置)，Vue3 - Router@4.x使用，vue-router4.x教程，Vue 3 中基于 vue-router 4 的路由配置与使用的简单示例，Vue实战—路由轻松设置vue-router(3) ，10分钟快速上手VueR
Vue3 之 Vue - Router
玄鱼殇
10-12 3502
Vue3 之 Vue - Router
Vue 3中的路由（Router）详解
最新发布
2301_79155654的博客
09-27 1357
路由其实就是URL与应用程序视图之间的映射关系。在传统的多页应用里面，每次跳转都是向服务器发送请求，服务器返回新的页面的过程。但是在SPA中，页面并不会刷新，而是根据URL的变化，动态地 加载相应的组件，为实现这一效果，就需要路由系统的管理。在components目录下创建Home.vue和About.vue。
一文详解:Vue3中使用Vue Router
热门推荐
九仞山的专栏
06-11 3万+
详细介绍了Vue3中使用Vue Router，从Vue Router的安装，基础知识到路由嵌套、路由守卫及路由懒加载等内容详细探讨了Vue Router的使用方法
Vue3 使用路由 Router
01-02 4014
众所周知，vue 是用来构建单页面应用的前端框架，大于大多数此类型应用来讲，都推荐使用官方支持的 vue Router，在单页面应用，客户端的 JavaScript 可以连接页面跳转请求，动态获取数据，然后无需重新加载页面的情况下，更新当前页面数据，这样可以带来更加丝滑的用户体验，因为这类场景下的用户通常会在很长的一段时间中做出多次交互，路由是更新在客户端执行的。vue Router是 vue 官方路由，他与 vue 核心深度集成，让 vue 构建单页面应用变得更加轻而易举。嵌套路由映射。
Vue3项目中使用vue-router
tigerhhzz的博客
06-20 2076
注意：这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。比如你点一个连接，vue-router会帮你匹配到相关的视图，并且返回给你。Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。既然官网说了，VUE主要构建单页应用，那什么是单页应用，SPA。
Vue-Router路由详解------路由的使用和模式
weixin_53027472的博客
10-10 617
vue-router的基本使用和两种路由模式
详解vue-router 命名路由和命名视图
08-27
Vue-Router 命名路由和命名视图详解 Vue-Router 是一个流行的前端路由库，它提供了许多强大的功能来帮助我们管理应用程序的路由。其中，命名路由和命名视图是两个非常重要的概念，本文将详细介绍这两个概念的实现和...
Vue-Router路由动态缓存组件(keep-alive)，vue2/vue3不同写法
共同学习，共同成长
06-24 2148
大家好，我是码喽的自我修养！今天给大家分享【Vue-Router路由动态缓存组件(keep-alive)，vue2/vue3不同写法】，超详细讲解！
vue-router路由模式详解(小结)
10-16
Vue Router 是 Vue.js 应用中的官方路由管理器，它允许我们通过 URL 来控制应用程序的导航。在本文中，我们将深入探讨 Vue Router 的路由模式，主要包括 Hash 模式和 History 模式。 1. **路由模式解析** Vue ...
vue3:vue-router路由的使用
米儿的博客
08-04 3万+
目前前端流行的三大框架, 都有自己的路由实现: Angular的ngRouter React的ReactRouter Vue的vue-router Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得非常容易。 目前Vue路由最新的版本是4.x版本。 vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起...
Vue 3 Router
nknmn
05-20 1728
可以通过 /* webpackChunkName: 'home' */ 这样的方式修改这个js 文件的名字，便于查找。链接精准激活时，应用于渲染的 的class， 默认是router-link-exact-active。默认的激活时的类名叫 router-link-active, 可以通过active-class 修改。在Url 中显示参数 localhost:8080/home?懒加载会在dist 文件夹下面的js 文件夹中生成单独的js 文件。
vue3 ----vue-router
seimeii的博客
08-04 386
vue-router
vue3 vue-router
BUG_devil的博客
07-30 2476
vue3 vue-router
vue3使用vue-router路由（路由懒加载、路由传参）
头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。
12-02 2784
vue-router 是 vue的一个插件库 1. 专门用来实现一个SPA单页面应用 2 .基于vue的项目基本都会用到此库
vue3路由（基本用法、路由守卫、动态路由）
m0_68716504的博客
07-08 2535
这里做法是使用isReady方法，它返回一个 Promise，它会在路由器完成初始导航之后被解析，也就是说这时所有和初始路由有关联的异步入口钩子和异步组件都已经被解析。route中有一个配置项是meta，专门提供给我们，在meta项中配置自己的属性与值，可用于在守卫中的权限判断。注：这里只说编程式路由导航，(不说<router-link>，项目中基本不用，也没法写逻辑)直接在需要设置权限的路由配置中写代码，代码逻辑和全局前置路由一模一样。三种分类：全局守卫、单个路由守卫、组件内部守卫。
Vue3项目配置Vue-Router
洛*璃的博客
07-16 1884
在使用作为前端开发框架时，我们通常以的形式进行开发。而单页面应用中，我们通常通过的方式来实现我们页面上组件之间的跳转。在本文中，博主将详细介绍在项目中，如何进行的安装与配置。
Vue-router动态路由详解与实战应用
3. 在`test.vue`组件中，通过`<router-view :name="testId"></router-view>`或者`this.$route.params.testId`来引用动态参数`testId`的值。 4. 当在浏览器中访问`localhost:8080/#/test/123`（这里用123替换实际的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值