vue3项目怎么写路由 + 浅析vue-router4源码

最新推荐文章于 2024-08-09 18:28:42 发布
最新推荐文章于 2024-08-09 18:28:42 发布
阅读量1.1k 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53312997/article/details/128718514
版权
本文介绍了Vue3项目中如何配置和使用路由，包括基础配置、路由守卫、Composition API下的useRoute和useRouter，以及route-view组件的工作原理。通过实例展示了动态参数、路由守卫维护登录态、以及如何利用Composition API与vue-router4结合使用。最后，文章还简要提及了vue-router的核心组件route-view的实现原理。
摘要由CSDN通过智能技术生成

在SPA项目里，路由router基本是前端侧处理的，那么vue3项目中一般会怎么去写router呢，本文就来讲讲vue-router4的一些常用写法，以及和Composition API的结合使用，同时简单讲讲实现原理，让你轻松理解前端router的原理。

基础配置

安装命令

入口引入

第一步是在main.ts的入口文件里引入router的插件

这里讲解下history这个配置

createWebHashHistory：指的是用hash模式路由，比如/#/order/detail这种带#的path

其他配置还有：

createWebHistory：基于html5原生的history API实现路由

createMemoryHistory：基于内存信息来隐式管理路由，适用于SSR场景

除了上面main.ts入口的配置，还需要在你的App.vue入口组件里使用<router-view>，这样路由匹配的视图就会加载在这个组件下面。

路由配置

入口配置完了，接下来就是各个分路由怎么配置

上面的代码就是之前提到的router文件，path是页面的路径，compnent对应视图组件

一般来说还会存在动态params的情况

这里的id其实就是一个动态参数，/order/123或/order/80EA都能匹配

最低0.47元/天 解锁文章
AIGC小陈
关注
三、vue3.0之路由(vue-router)配置及语法
张先森的博客
05-27 1万+
vue3.0的路由(vue-router)
vue-router使用与源码浅析
weixin_30230009的博客
06-14 558
本文主要讨论最新版的vue-router（支持Vue3），主要从其出现原因、使用方式、自己实现一个玩具vue-router以及vue-router源码分析这几个角度去讨论，希望你喜欢。前端路由演变在JQuery时代，多数Web项目的路由都是由后端实现的，用户访问网页时的常见流程为：1.用户访问路由2.后端获得路由并匹配相应的模板3.后端动态渲染模板并返回4.浏览器加载返回...
vue3 配置路由
悟世君子的博客
06-10 1万+
使用 vue3 配置路由，步骤如下 1、安装路由 npm install vue-router@4
【vue3|第20期】vue3中Vue Router路由器工作模式
最新发布
Commas的博客
08-09 1180
Web 页面的工作方式是通过 HTTP 请求从服务器获取HTML文档，然后由浏览器解析并显示内容。随着 Web 应用的发展，特别是单页应用（SPA）的流行，需要在不重新加载整个页面的情况下，更新页面的部分内容。Vue Router 支持多种工作模式，每种模式都有其特定的使用场景和配置方式。本文将详细介绍 Vue Router 的三种工作模式：Hash 模式、HTML5 History 模式 和 Abstract 模式。
vue3中的路由写法
11-09 800
1、scr文件下创建一个router文件夹 文件夹下创建要给index.js。2.在main.js下引入配置路由的文件并且挂载在实例中。
代码模版-vue3使用router的写法
abcnull 的博客
07-03 495
同时在 src 下创建 views 文件夹，其中主要是 vue 组件，来和 index.js 中的路由对应。vue3 项目中 src 下创建 router/index.js，其中主要声明路由。vue3 一般使用 vue-router，npm 下载 vue-router 包。在 App.vue 这个根组件中的 template 中添加。在 src 下的 main.js 中添加使用路由，新增。最后 run 起来查看是否生效即可。index.js 中有。
Vue3 - 路由
qq_49523975的博客
02-24 1337
四、Vue中的ajax 4.1 vue脚手架配置代理 解决开发环境Ajax跨域问题 Vue CLI文档 方法一 ​ 在vue.config.js中添加如下配置： devServer:{ proxy:"http://localhost:5000" //配置代理服务器，这个路径端口号要与传送数据的服务器端口号一致 } 复制代码 说明： 优点：配置简单，请求资源时直接发给前端（8080）即可。 缺点：不能配置多个代理。不能灵活的控制请求是否走代理，这会告诉开发服务器将任何未知请求 (没有匹配到静态文件
vue-router源码之history类的浅析
01-19
对于vue-router来说，有三种路由模式history,hash,abstract, abstract是运行在没有window的环境下的，这三种模式都是继承于history类，history实现了一些共用的方法，对于一开始看vue-router源码来说，可以从这里...
浅析vue-router实现原理及两种模式
10-15
Vue Router 是 Vue.js 应用程序中的官方路由库，它负责管理应用程序的导航和视图切换。本文将深入探讨 Vue Router 的实现原理及其两种主要工作模式：Hash 模式和 History 模式。 1. **Vue Router 的核心原理** Vue...
vue3路由
ldd_eb的博客
07-29 1882
2.路由组件：靠路由规则渲染出来的。1.路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。1.引入创建路由器并暴露，引入可能用到的路由组件 router/index.ts。history:createWebHistory(), //history模式。缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。优点：URL更加美观，不带有#，更接近传统的网站URL。作用：控制路由跳转时操作浏览器历史记录的模式。3.一般组件：亲手写出来的标签。
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三级路由
06-25
vue如何使用二级路由和三级路由,以及路由的引用,路由的抽离
vue3路由（基本用法、路由守卫、动态路由）
weixin_50961467的博客
04-16 5492
这里做法是使用isReady方法，它返回一个 Promise，它会在路由器完成初始导航之后被解析，也就是说这时所有和初始路由有关联的异步入口钩子和异步组件都已经被解析。用于在组件中获取当前路由的信息，返回一个包含路由信息的对象。用于获取路由实例，可以通过它来进行一些动态的路由操作，比如跳转到新的路由。route中有一个配置项是meta，专门提供给我们，在meta项中配置自己的属性与值，可用于在守卫中的权限判断。2、在全局路由守卫中设置跳转规则（未登录则跳转到登录页，已登录跳转到首页或放行）
【vue3 路由使用与讲解】vue-router ： 简洁直观的全面介绍
从今年开始写写博客~~
03-02 2785
vue-router,动态路由,动态添加路由addRoute,命名路由name,路由重定向redirect,路由传参params,query,组合式Api,路由跳转页面router-link,push,replace,获取路由参数,路由导航守卫,路由模式,路由缓存,嵌套路由,路由别名,声明路由
vue3的路由
weixin_72324200的博客
02-12 683
切换的标题为导航组件（pages/views文件夹中 ***.vue），把定义的组件引入到路由（router文件夹）中，path路径随便起名。路由组件通常放在pages或view文件夹，一般组件通常放在components文件夹，：靠路由的规则渲染出来的。在需要使用的页面结构中定义两个区域，分别为导航区和展示区，展示区随着导航区的单击切换展示区的内容。通过点击导航，视觉效果上"消失"了的路由组件，默认是被销毁掉的，需要的时候再去挂载。优点：URL更加美观，不带有#，更接近传统的网站URL。
vue3最全路由使用教程
begefefsef的博客
03-06 2万+
路由介绍我再此之前发布过vue2的基本使用，想要了解的可以去vue2路由教程 下面开始上手路由 认识vue-router 目前前端流行的三大框架, 都有自己的路由实现: Angular的ngRouter React的ReactRouter Vue的vue-router vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起来. 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换 安装Vue Router：npm install vue-router@4 路
vue3 路由的使用
m0_49515138的博客
02-03 2万+
name 是路由的名称，非必填，但是一般都会配置上去，这样可以很方便的通过 name 来代替 path 实现路由的跳转，因为像有时候的开发环境和生产环境的路径不一致，或者说路径变更，通过 name 无需调整，但如果通过 path，可能就要修改很多文件里面的链接跳转目标了。所以 Vue 在 Webpack 的代码分割功能的基础上，推出了 异步组件，可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样按需载入，很方便的实现路由组件的懒加载。
vue3-router
skdjbd的博客
03-18 504
vue3的路由和vue2的路由版本核心方法基本保持一致的,重点是vue3路由中的composition组合式的使用方式。
掌握Vue3+Ts+Pinia+Vue-Router4构建后台管理系统
这意味着开发者可以通过研究和分析这些源码，来学习如何在实际项目中应用Vue3的新特性、利用TypeScript来增强代码的健壮性、采用Pinia来进行高效的状态管理，以及使用Vue-Router 4来构建复杂的单页应用路由系统。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值