【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;
相关推荐
caimo2 分钟前
Java无法访问网址出现Timeout但是浏览器和Postman可以
java·开发语言·postman
啃火龙果的兔子6 分钟前
前端八股文性能调优篇
前端·前端框架
JarvanMo10 分钟前
停止与 Compose 导航作斗争(这 5 个技巧将改变一切)
前端
trsoliu20 分钟前
前端周刊第437期:AI编程助手、WebGPU实战与React生态新动态
前端
AnalogElectronic24 分钟前
vue3 实现贪吃蛇 电脑版01
javascript·vue.js·ecmascript
trsoliu26 分钟前
2025年Web前端前沿技术动态:WebGL动画、CSS View Transitions与HTML隐藏API
前端·javascript·css
trsoliu28 分钟前
2025年Web前端最新趋势:React基金会成立、AI编码助手崛起与Astro极速搜索
前端·javascript·react.js
三体世界29 分钟前
Qt从入门到放弃学习之路(1)
开发语言·c++·git·qt·学习·前端框架·编辑器
一 乐31 分钟前
商城推荐系统|基于SprinBoot+vue的商城推荐系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·后端·商城推荐系统
悟能不能悟36 分钟前
jdk25结构化并发和虚拟线程如何配合使用?有什么最佳实践?
java·开发语言