【Vue3速成】04-vue3官方库-路由机制

弹简特2026-05-24 12:25

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
🎯 你正在阅读「半路出家玩前端」系列文章 🎯

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

🔥 弹简特 个人主页

❄️ 个人专栏直通车：

✨ 靠热爱去书写自己，靠勇敢去书写生活！

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

🌟 博主简介:

文章目录：

一、vue3路由的简介

1、路由是干什么的

我们的路由机制 是为了帮我们实现一个组件切换的效果的。

在我们的vue中，我们始终访问的都是index.html页面，也就是说我们始终访问的都是一个页面，但是你会发现，我们的这个页面有多页vue组件内容组成，为了能够切换各个组件的内容展示，那么我们就有了路由机制。

2、一图解释路由的实现思路

二、路由的入门案例

1、首先咱们有多个组件

需要下载路由相关的依赖npm i vue-router

创建组件：

代码

html 复制代码 
<script setup>
</script>

<template>
    <h1>我是组件1</h1>
</template>

<script setup>
</script>

<template>
    <h1>我是组件2</h1>
</template>

<script setup>
</script>

<template>
    <h1>我是组件3</h1>
</template>

2、为每一个组件分配一个路径并配置起来

代码：

js 复制代码 
//首先我们得导入vue-router框架中的创建路由对象的方法和历史记录的方法
import {createRouter, createWebHashHistory} from "vue-router"

//我们需要配置的是组件1、2、3的路由，所以先将这个三个路由导入进来
import zujian1 from "../components/zujian1.vue"
import zujian2 from "../components/zujian2.vue"
import zujian3 from "../components/zujian3.vue"

//配置路由文件：路径和组件的映射关系

//首先我们需要创建出一个路由对象
const router = createRouter({
    history: createWebHashHistory(),
    routes: [      
        {
            path: "/zujian1",
            components: {
                zujian1View: zujian1
            }
        },
        {
            path: "/zujian2",
            components: {
                zujian2View: zujian2
            }
        },
        {
            path: "/zujian3",
            components: {
                zujian3View: zujian3
            }
        }
    ]
}) 

//为了到时候注册这个路由对象，我们需要导出，由于只是导出一个对象，所以此处我们使用的是默认导出
export default router

解释：

3、将配置文件注册起来

在main.js文件中注册路由

js 复制代码 
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//首先导入配置文件中的router对象
import router from './router/router.js'

//创建vue对象
let vue = createApp(App);
//在挂载之前注册
vue.use(router)

//挂载
vue.mount('#app')

4、使用路由

那么我们会在App.vue这个组件中去使用其他子组件，那么怎么使用呢？如下所示：

html 复制代码 
<script setup>
</script>

<template>
  <div>
    <h3>导航</h3>
    <router-link to="/zujian1">组件1</router-link> 
    <br>
    <router-link to="/zujian2">组件2</router-link> 
    <br>
    <router-link to="/zujian3">组件3</router-link>

    <hr>

    <!-- 命名视图 -->
    <router-view name="zujian1View"></router-view>
    <router-view name="zujian2View"></router-view>
    <router-view name="zujian3View"></router-view>
  </div>
</template>

5、配置一个默认路由

一般我们登录成功之后，会有一个默认的页面，比如首页，那么现在我们将zujian1.vue设置为首页，即设置为默认路由

代码：

js 复制代码 
//首先我们得导入vue-router框架中的创建路由对象的方法和历史记录的方法
import {createRouter, createWebHashHistory} from "vue-router"

//我们需要配置的是组件1、2、3的路由，所以先将这个三个路由导入进来
import zujian1 from "../components/zujian1.vue"
import zujian2 from "../components/zujian2.vue"
import zujian3 from "../components/zujian3.vue"

//配置路由文件：路径和组件的映射关系

//首先我们需要创建出一个路由对象
const router = createRouter({
    history: createWebHashHistory(),
    routes: [    
        {
            path: "/",
            components: {
                zujian1Index: zujian1
            }
        },  
        {
            path: "/zujian1",
            components: {
                zujian1View: zujian1
            }
        },
        {
            path: "/zujian2",
            components: {
                zujian2View: zujian2
            }
        },
        {
            path: "/zujian3",
            components: {
                zujian3View: zujian3
            }
        }
    ]
}) 

//为了到时候注册这个路由对象，我们需要导出，由于只是导出一个对象，所以此处我们使用的是默认导出
export default router
html 复制代码 
<script setup>
</script>

<template>
  <div>
    <h3>导航</h3>
    <router-link to="/">组件1设置为默认</router-link> 
    <br>
    <router-link to="/zujian1">组件1</router-link> 
    <br>
    <router-link to="/zujian2">组件2</router-link> 
    <br>
    <router-link to="/zujian3">组件3</router-link>

    <hr>

    <!-- 命名视图 -->
    <router-view name="zujian1View"></router-view>
    <router-view name="zujian2View"></router-view>
    <router-view name="zujian3View"></router-view>
    <router-view name="zujian1Index"></router-view>
  </div>
</template>

有什么作用呢？

你看我们访问：http://localhost:5173/的时候，他会默认变为http://localhost:5173/#/

然后显示的是组件1

补充

三、路由重定向

什么是冲重定向？

所谓的重定向就是：点击A的时候给我跳到B

js 复制代码 
//首先我们得导入vue-router框架中的创建路由对象的方法和历史记录的方法
import {createRouter, createWebHashHistory} from "vue-router"

//我们需要配置的是组件1、2、3的路由，所以先将这个三个路由导入进来
import zujian1 from "../components/zujian1.vue"
import zujian2 from "../components/zujian2.vue"
import zujian3 from "../components/zujian3.vue"

//配置路由文件：路径和组件的映射关系

//首先我们需要创建出一个路由对象
const router = createRouter({
    history: createWebHashHistory(),
    routes: [    
        {
            path: "/",
            components: {
                zujian1Index: zujian1
            }
        },  
        {
            path: "/zujian1",
            components: {
                zujian1View: zujian1
            }
        },
        {
            path: "/zujian2",
            components: {
                zujian2View: zujian2
            }
        },
        {
            path: "/zujian3",
            components: {
                zujian3View: zujian3
            }
        },
        {
            path: "/test",
            redirect: "/zujian3"
        }
    ]
}) 

//为了到时候注册这个路由对象，我们需要导出，由于只是导出一个对象，所以此处我们使用的是默认导出
export default router
html 复制代码 
<script setup>
</script>

<template>
  <div>
    <h3>导航</h3>
    <router-link to="/test">测试重定向</router-link> 


    <!-- <br>
    <br>
    <router-link to="/zujian2">组件2</router-link> 
    <br>
    <router-link to="/zujian3">组件3</router-link> -->

    <hr>
    <router-view name="zujian3View"></router-view>
    <!-- 命名视图 -->
    <!-- <router-view name="zujian1View"></router-view> -->
    <!-- <router-view name="zujian2View"></router-view>
    <router-view name="zujian3View"></router-view>
    <router-view name="zujian1Index"></router-view> -->
  </div>
</template>

比如：我现在访问的是/test他给我去的是/zujian3

四、编程式路由

为什么需要编程时路由呢？比如你看我们有这样的一个场景：

当我点击"登录"按钮的时候 我希望的是跳到对应的页面里面去，那么这样的一个操作，我希望绑定一个事件来实现，当我们点击按钮的时候 跳到组件三

html 复制代码 
<script setup>
  //首先需要引入我们的编程式路由对象：
  import { useRouter } from "vue-router"

  //创建出使用路由的对象
  let router = useRouter();

  let show = () => {
    router.push({
      path: "/zujian3"
    })
  }
</script>

<template>
  <div>
    <!-- 点击按钮跳到组件三 -->
     <input type="button" value="跳到组件3" @click="show()">


     <router-view name="zujian3View"></router-view>
  </div>
</template>

五、路由传参

传参有两种方式：路径和键值对

  • 路径：ip:端口号/上下文/参数
  • 键值对：ip:端口号/上下文?key=value

1、为什么会有路由传参

我们首先来看一个业务场景：

  • 列表跳转详情页，传递主键ID查询详情数据
  • 搜索页跳转结果页，携带关键词、分类、页码筛选数据
  • 页面间传递状态标识，区分不同操作页面
  • 跨页面共享数据，满足组件间参数调用接口需求
  • 订单、用户、商品类页面跳转传参，完成业务数据联动

就拿我们的第1个场景来说，如果当前我们是在详情页，我们详情页要去查询后端的一个详细信息，我们是需要传递对应的id，而这个对应的主键id是在列表页中才有的，此时我们这个详情页就需要从列表中获取到对应的主键id。这样的一个场景就需要用到我们的路由传参，我们通过列表页或者说列表组件将列表组件中有的主键id传递到我们的详情组件，在这里我们介绍两种传参方式。

2、路径参数

我们现在的场景就是从App.vue这个组件中去传递两个参数到我们的showDetial.vue这个组件中：

那么先创建一个showDetial.vue组件

2.1 配置路由映射信息

我们需要在路由配置文件中配置路由信息，如下:

对于我们的路径传参，我们多了一个属性，就是name属性，他的值必须是字符串，这个name属性有什么作用？我们后续会说

js 复制代码 
//首先我们得导入vue-router框架中的创建路由对象的方法和历史记录的方法
import {createRouter, createWebHashHistory} from "vue-router"

//我们需要配置的是组件1、2、3的路由，所以先将这个三个路由导入进来
import zujian1 from "../components/zujian1.vue"
import zujian2 from "../components/zujian2.vue"
import zujian3 from "../components/zujian3.vue"
import showDetail from "../components/showDetial.vue"

//配置路由文件：路径和组件的映射关系

//首先我们需要创建出一个路由对象
const router = createRouter({
    history: createWebHashHistory(),
    routes: [    
        {
            path: "/",
            components: {
                zujian1Index: zujian1
            }
        },  
        {
            path: "/zujian1",
            components: {
                zujian1View: zujian1
            }
        },
        {
            path: "/zujian2",
            components: {
                zujian2View: zujian2
            }
        },
        {
            path: "/zujian3",
            components: {
                zujian3View: zujian3
            }
        },
        {
            path: "/test",
            redirect: "/zujian3"
        },
        {
            path: "/showDetail/:username/:password",
            name: "showDetail01",
            components: {
                showDetail01Viem: showDetail
            }
        }
    ]
}) 

//为了到时候注册这个路由对象，我们需要导出，由于只是导出一个对象，所以此处我们使用的是默认导出
export default router

解释：

2.2 开始传参

此时我们到App.vue这个组件中去实现对应的代码，然后呢传递对应的参数：

html 复制代码 
<script setup>
  //首先需要引入我们的编程式路由对象：
  import { useRouter } from "vue-router"

  //创建出使用路由的对象
  let router = useRouter();

  let showDetail = (userName, password) => {
    router.push({
      name: "showDetail01",
      params: {
        username: userName,
        password: password 
      }
    })
  }
</script>

<template>
  <div>
    <!-- 点击按钮跳到组件三 -->
    <input type="button" value="路由传参" @click="showDetail('admin', 123456)">


    <router-view name="showDetail01Viem"></router-view>
  </div>
</template>
2.3 在目标组件中获取参数
html 复制代码 
<script setup>
    //首先接收路径中的参数信息的话，我们得使用userRoute方法
    import {useRoute} from "vue-router"

    //创建出这个路由参数对象
    let route = useRoute();

    //获取路由对象中的参数
    let username = route.params.username;
    let password = route.params.password;
</script>
<template>
    <div>
        <!-- 将值取出来 -->
        <h3>用户名：{{ username }} ---- 密码：{{ password }}</h3>
    </div>
</template>

结果：

3、键值对参数(查询字符串)

说明：在这里一定要注意，对于路径参数，我们是需要将参数也是认作是路径的一部分，而我们的键值对参数：?前面是路径，?后面就不是路径。

3.1 创建一个ShowDetail2.vue
3.2 配置路由
js 复制代码 
//首先我们得导入vue-router框架中的创建路由对象的方法和历史记录的方法
import {createRouter, createWebHashHistory} from "vue-router"

//我们需要配置的是组件1、2、3的路由，所以先将这个三个路由导入进来
import zujian1 from "../components/zujian1.vue"
import zujian2 from "../components/zujian2.vue"
import zujian3 from "../components/zujian3.vue"
import showDetail from "../components/showDetial.vue"
import showDetail2 from "../components/ShowDetail2.vue"

//配置路由文件：路径和组件的映射关系

//首先我们需要创建出一个路由对象
const router = createRouter({
    history: createWebHashHistory(),
    routes: [    
        {
            path: "/",
            components: {
                zujian1Index: zujian1
            }
        },  
        {
            path: "/zujian1",
            components: {
                zujian1View: zujian1
            }
        },
        {
            path: "/zujian2",
            components: {
                zujian2View: zujian2
            }
        },
        {
            path: "/zujian3",
            components: {
                zujian3View: zujian3
            }
        },
        {
            path: "/test",
            redirect: "/zujian3"
        },
        {
            path: "/showDetail/:username/:password",
            name: "showDetail01",
            components: {
                showDetail01Viem: showDetail
            }
        },
        {
            path: "/showDetail",
            components: {
                showDetail2View: showDetail2
            }
        }
    ]
}) 

//为了到时候注册这个路由对象，我们需要导出，由于只是导出一个对象，所以此处我们使用的是默认导出
export default router
3.3 开始传参
html 复制代码 
<script setup>
  //首先需要引入我们的编程式路由对象：
  import { useRouter } from "vue-router"

  //创建出使用路由的对象
  let router = useRouter();

  let showDetail = (userName, password) => {
    //方式1：
    // router.push(`/showDetail?username=${userName}&password=${password}`)
    router.push({
      path:"/showDetail",
      query:{
        username: userName,
        password: password
      }
    })

  }
</script>

<template>
  <div>
    <!-- 点击按钮跳到组件三 -->
    <input type="button" value="路由传参" @click="showDetail('admin', 123456)">

    <router-view name="showDetail2View"></router-view>
  </div>
</template>
3.4 在目标组件中接收参数
html 复制代码 
<script setup>
    //首先接收路径中的参数信息的话，我们得使用userRoute方法
    import {useRoute} from "vue-router"

    //创建出这个路由参数对象
    let route = useRoute();

    //获取路由对象中的参数
    let username = route.query.username;
    let password = route.query.password;
</script>
<template>
    <div>
        <!-- 将值取出来 -->
        <h3>用户名：{{ username }} ---- 密码：{{ password }}</h3>
    </div>
</template>

结果：

相关推荐
光影少年7 小时前
前端浏览器自动化
运维·前端·前端框架·自动化
threelab7 小时前
Three.js 抽象艺术着色器效果 | 三维可视化 / AI 提示词
前端·javascript·人工智能·3d·着色器
萌新小码农‍7 小时前
Python的input函数
java·前端·python
2301_803538957 小时前
CSS复合属性实战技巧与交互设计应用
前端
nashane7 小时前
HarmonyOS 6学习：Web组件内嵌H5视频全屏“复活”指南
前端·学习·harmonyos
BY组态7 小时前
Ricon组态系统：新一代Web可视化组态平台
前端·物联网·iot·web组态·组态
i_am_a_div_日积月累_7 小时前
3.contextBridge桥梁
前端·javascript·vue.js·electron
bug-100868 小时前
hooks,mixin,pinia,vuex
前端·vue.js
Shirley~~8 小时前
npm包发布与 dist-tag 管理指南
前端·npm·node.js
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法04裂开！ChatGPT 居然开始要手机号验证，附详细解决方法05CC-Switch & Claude 基于 Linux 服务器安装使用指南06【AI】2026 年具身智能模型和世界模型总结07几个好用的ip纯净度检测网站08codex app每次打开重连5次Reconnecting问题解决09装上就回不去了：CodeGraph 让 AI 编程效率飙升 92%，它到底做了什么？10CC-Switch 全平台下载、安装与使用全指南（Windows/macOS/Linux）