Vue3 - 路由 Vue-router 4.X（配置与使用教程）

已于 2025-01-19 17:00:39 修改
阅读量5k 收藏 12
点赞数 4
分类专栏： + Vue3 + Vue3 开发问题汇总 文章标签： vue3.js vue-router4.x vue3路由 官方文档详细教程 vue router4使用教程
于 2022-11-30 20:04:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44198965/article/details/128120895
版权
+ Vue3 同时被 2 个专栏收录
254 篇文章 ¥9.90 ¥99.00
订阅专栏
+ Vue3 开发问题汇总
147 篇文章 ¥9.90 ¥99.00
订阅专栏
本文详细介绍了Vue3中如何配置和使用vue-router 4.x。从安装配置、页面创建到路由传参，一步步展示了从0到1的完整过程。通过实例演示了编程式和常规式跳转，以及不同类型的参数传递和接收，同时提到了SEO方面的考虑。

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

目录

前言

在咱们 Vue2 时代，官方推荐咱们使用 vue-router 3.X 的库，如果是用脚手架创建的话，就直接默认集成到里面了。

Vue3 使用的是 vue-router 4.X 官方库，学习成本并不高。

安装配置

我们正式开始在 Vue3 中尝试手动从 0-1 配置好路由。

在项目终端，执行如下命令：

cnpm install vue-router@4 -S

咱们搞个 -S 写到咱们的 package.json 下 dependencies 字段中，以后项目安装依赖时会自动安装。

在这里插入图片描述
安装完毕后，打开 package.json 文件，可以看到已经有了。

了解本专栏 订阅专栏 解锁全文
vue-router四版本-适用vue3
weixin_68658847的博客
04-10 4759
vue-router四版本-适用vue3
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法//...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
vue3.x+vite+ts+vue-router@4.x 路由使用demo，可供学习使用，也可在此基础上写项目
Vue3 路由配置与跳转传参完整指南
最新发布
qq505751223的博客
05-09 1022
路由配置：使用创建路由，创建历史模式动态路由：使用:param语法定义动态段跳转方式传参方式paramsquery参数接收：使用useRoute()获取当前路由信息高级功能：路由守卫、元信息、动态路由添加等按照这些方法，可以灵活地在 Vue3 项目中实现各种路由需求。
Vue Router 4【实用教程】（2024最新版）vue3 路由管理
朝阳39的博客
07-23 1609
Vue Router 是 Vue 官方的客户端路由解决方案，在单页应用 (SPA) 中，用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。 核心思想： 通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。 官网 https://router.vuejs.org/zh/guide/ 安装 通常创建 vue3 项目时，选择安装 Pinia 就会自动集成。 但若目前项目里没有，则按如下流程操作 npm install vue-router@4 新建文件 s
【Vue3】Vue Router4路由的配置
杜小舟的博客
11-24 3542
vue-router4安装、配置、使用
vue3 系列：Vue-Router4 快速入门
weixin_64684095的博客
04-03 417
Vue-Router4 快速入门
Vue3——Router4教程--路由模式
小余的前端博客
04-22 458
一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。key 为路径, value 可能是 function 或 component。
助你上手Vue3全家桶之Vue-Router4教程
鹏多多的博客
11-01 2725
本文主要讲开发过程中需要常用的，有些`api`不常用，需要的时候可以自行查找文档。因为`V3`中没有了`this`，所以`router4`语法有所修改，模板中我们仍然可以访问`$router`和`$route`，所以不需要在`setup`中返回`router`或`route`
VUE3（五）vue路由vue-router4
camellia的博客
02-22 1798
使用vue-router，这里特别说明一下，我这里记录的是vue-router文件的编写。及在页面中的使用。 我的站点主要分为三个部分： 1：pc端页面的路由 2：手机端页面的路由 3：后端管理系统的路由 因此，我这里会使用到路由嵌套（子路由）。 具体的用法请参照官方文档： https://router.vuejs.org/ 我这里放一下我当前使用文件得我内容。我使用的基础语言是typescript： Index.ts // 引入vue-router对象 import { createRouter, cre
基于vue-cli4.0 vue-router4.x+vuex4.x+ant-design开发的后台管理系统模板.zip
02-02
是基于vue3.0 vue-cli4.0 vue-router4.x+vuex4.x+ant-design-vue2.x开发的后台管理系统模板，包含权限路由、权限按钮、流程配置、个人中心等基础功能. ## 文件 ```bash # vue-antd-admin - src - api - assets -...
Vue-Router2.X多种路由实现方式总结
01-21
注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。 推荐使用npm安装。 npm install vue-router 一、使用路由 在main.js中，需要明确安装路由功能： import ...
Vue3的vue-router4的用法
weixin_44691513的博客
05-23 2100
再vue-cil4的脚手架里面先下载vue-router4的路由插件 npm i vue-router@next 在main.js中全局使用如下： import { createApp } from 'vue' import App from './App.vue' import './index.css' import {createRouter, createWebHashHistory} from 'vue-router' import Dos from './components/Dos.vue'
Vue3 路由管理（Vue Router 4）
Flying_Fish_roe的博客
01-15 1004
Vue Router是Vue.js的官方路由管理器，用于在单页应用中实现不同URL路径对应不同组件的切换。通过Vue Router，开发者可以轻松管理应用的导航逻辑，实现页面间的无缝切换，提升用户体验。路由是URL路径与组件之间的映射关系。通过在routes数组中定义路由对象，可以指定每个路径对应的组件。path: '/',},可以根据不同路由的需求，设置不同的滚动行为。解析：带锚点的路由：如果路由包含哈希（如#section1。
vue3 - 路由 Vue-Router 4（详细教程）
高级前端工程师
02-09 3235
【Vue3】Vue Router4路由的配置Vue3 - 路由 Vue-router 4.X(配置与使用教程)vue-router路由Vue3使用路由VueRouter4的简单示例vue3使用router4 keepalive(Vue3项目使用Vue-router4Vue3 使用路由VueRouter4vue3 Router4动态添加路由Vue3 使用路由VueRouter4vue router4在vue3使用vue3+ts使用vue-router4的使用Vue Router 4.0 正式发布!焕然一新vu
小满Router（第四章-路由传参）
qq1195566313的博客
03-20 1万+
Query路由传参 编程式导航 使用router push 或者 replace 的时候 改为对象形式新增query 必须传入一个对象 const toDetail = (item: Item) => { router.push({ path: '/reg', query: item }) } 接受参数 使用useRoute 的 query import { useRoute } from 'vue-router'; const rout.
vue3路由传参
wch19960518的博客
06-03 562
【代码】vue3路由传参。
Vue3路由传参
热门推荐
qq_54334713的博客
09-06 1万+
Vue3路由传参
vue3 router配置
08-11
对于Vue 3的路由配置，你可以按照以下步骤进行操作: 1. 首先，在`App.vue`文件中添加`router-view`和`router-link`组件，用于展示路由组件和导航链接。你可以根据自己的需要进行具体的添加。例如： ```html <template> <nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </nav> <router-view/> </template> ``` 2. 接下来，在一个独立的JavaScript文件中，比如`router.js`，添加以下代码： ```javascript import { createRouter, createWebHistory } from "vue-router"; import routes from "./routes"; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` 这里使用`createRouter`和`createWebHistory`函数来创建路由实例，并传入路由配置信息和路由模式。 3. 在`index.js`文件中，引入上述的`router.js`文件，并将路由实例设置为默认导出。代码如下： ```javascript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; import router from &#39;./router&#39;; const app = createApp(App); app.use(router); app.mount(&#39;#app&#39;); ``` 通过`app.use(router)`来将路由实例与Vue应用关联起来。 这样，你就完成了Vue 3的路由配置。请根据自己的具体情况进行相应的修改和调整。12<em>3</em> #### 引用[.reference_title] - *1* [Vue3配置路由(vue-router)](https://blog.csdn.net/weixin_71170351/article/details/128950996)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* [【vue3】路由配置](https://blog.csdn.net/weixin_44431073/article/details/123734204)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *3* [vue3 配置路由](https://blog.csdn.net/wsjzzcbq/article/details/117789118)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王二红

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值