【Vue3】一文学会动态路由和编程式路由的使用

一、前言

参考文章【Vue3+Vite】路由机制router 快速学习 第四期_vue3 vite 路由-CSDN博客

本文取其中编程式路由代码加深学习

学习对比动态路由,编程式路由,代码附结尾

二、内容

2.1 动态路由路径传参

:id 是一个 动态路由参数(dynamic route param),用于匹配 URL 中的某一段值,并将其作为参数传递给组件,类似于占位符,路径参数使用param接收。

如图所示包含App.vue与router.js的代码,比较了路径传参与动态路由路径传参,最终二者实现的效果是一样的。

操作如下:

  1. 以id为例,让他作为动态参数传入ShowDetail1,通过编程式路由使用param接收(红)
  2. 设置name参数,对应rounter.js里面的name,这样可以自动导航到别名对应的路径(绿)
  3. 点击按钮后会导航此路径后会渲染ShowDetail1这个Vue页面
  4. 最后渲染到名字为 showDetailView1<router-view> 中(蓝)
  • showDetail1如图所示,可以通过路由的param获取需要的值

5.日志结果如图

2.2 动态路由键值对传参

v-bind:to 表示:把一个 JavaScript 对象绑定到 <router-link>to 属性上,键值对不需要设置路径参数,而是使用对象

为了更详细对比与展示过程接下来分步解释

操作如下:

  1. 设置跳转的路由

编程式路由通过v-bind:to绑定 JavaScript 形式的键值对

动态路由则如下图使用query接收参数

  1. 设置跳转的路由

键值对跳转路径:/showDetail2?id=1&language=Math

传参跳转路径:/showDetail1/1/English

不需要像路径传参那样使用name别名,也不需要在路径里设置路由参数

因为是以query键值对的形式接受的,他会自动加在路径后面

  1. 渲染页面

如图所示我们可以在showDetail2.vue页面打个日志

  1. 渲染到指定位置

视图渲染到名字为 showDetailView2<router-view>

三、总结

区别如下

|----------|-----------------------------------|------------------------------------|
| 类型 | 示例 | 是否需要在路由中定义 |
| params | /showDetail1/1/English | ✅ 需要定义动态路径参数,如 :id , :language |
| query | /showDetail2?id=1&language=Math | ❌ 不需要定义,直接传递键值对即可 |

注意需要先安装路由

复制代码
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router';

let route = useRoute();
let languageId = ref(0);
let languageName = ref('');

onMounted(() => {
    // 通过query参数获取数据
    console.log(route.query)
    console.log(languageId.value)
    console.log(languageName.value)
    languageId.value = route.query.id;
    languageName.value = route.query.language;
    console.log(route.query)
    console.log(languageId.value)
    console.log(languageName.value)
});

</script>

<template>
    <div>
        <h1>ShowDetail2页面</h1>
        <h3>
            编号{{ route.query.id }}:{{ route.query.language }}是数学
        </h3>
        <h3>
            编号{{ languageId }}:{{ languageName }}是数学
        </h3>
    </div>
</template>

<style scoped></style>

<script setup>
import { useRoute } from 'vue-router';
import { ref,onMounted } from 'vue';

let route = useRoute();
let languageId = ref(0);
let languageName = ref('');
// 借助更新时生命周期,将数据更新进入响应式对象
onMounted(()  => {
    languageId.value = route.params.id;
    languageName.value = route.params.language;
    console.log(languageId.value);
    console.log(languageName.value);
});

</script>

<template>
    <div>ShowDetail1页面</div>
    <h3>编号{{route.params.id}}:{{route.params.language}}是英语</h3>
    <h3>编号{{languageId}}:{{languageName}}是英语</h3>
</template>

<style scoped>
</style>

// 导入路由创建的相关方法
import { createRouter, createWebHashHistory } from 'vue-router'

// 导入vue组件
import HelloVue from '../components/HelloVue.vue'
import ShowDetail1 from '../components/detail/ShowDetail1.vue'
import ShowDetail2 from '../components/detail/ShowDetail2.vue'
// 创建路由对象,声明路由规则
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        // {
        //     path: '/',
        //     components: {
        //         default: HelloVue, // 默认视图位置
        //         helloView: HelloVue // name 为helloView的视图位置
        //     }
        // },
        {
            path: '/showDetail1/:id/:language',
            name: 'showDetail1',
            components: {
                showDetailView1: ShowDetail1
            }
        },
        {
            path: '/showDetail2',
            components: {
                showDetailView2: ShowDetail2
            }
        }
    ]
})
// 对外暴露路由对象
export default router;
相关推荐
00后程序员张2 分钟前
从零构建 gRPC 跨语言通信:C++ 服务端与
开发语言·c++
Komorebi_999922 分钟前
Unocss
开发语言·前端
爱凤的小光1 小时前
图漾相机C++语言---Sample_V1(4.X.X版本)完整参考例子(待完善)
开发语言·c++·数码相机
goto_w1 小时前
前端实现复杂的Excel导出
前端·excel
Baklib梅梅1 小时前
2025文档管理软件推荐:效率、安全与协作全解析
前端·ruby on rails·前端框架·ruby
Derrick__12 小时前
Python常用三方模块——Pillow
开发语言·python·pillow
小时前端2 小时前
Vue基础10题:答错一道,别说你熟悉Vue
vue.js
卷Java2 小时前
小程序前端功能更新说明
java·前端·spring boot·微信小程序·小程序·uni-app
FogLetter2 小时前
前端性能救星:虚拟列表原理与实现,让你的10万条数据流畅如丝!
前端·性能优化
我是天龙_绍2 小时前
前端驼峰,后端下划线,问:如何统一?
前端