【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;
相关推荐
四岁半儿1 小时前
常用css
前端·css
你的人类朋友2 小时前
说说git的变基
前端·git·后端
姑苏洛言2 小时前
网页作品惊艳亮相!这个浪浪山小妖怪网站太治愈了!
前端
字节逆旅2 小时前
nvm 安装pnpm的异常解决
前端·npm
Jerry2 小时前
Compose 从 View 系统迁移
前端
四维碎片2 小时前
【Qt】线程池与全局信号实现异步协作
开发语言·qt·ui·visual studio
IT码农-爱吃辣条2 小时前
Three.js 初级教程大全
开发语言·javascript·three.js
GIS之路2 小时前
2025年 两院院士 增选有效候选人名单公布
前端
四岁半儿2 小时前
vue,H5车牌弹框定制键盘包括新能源车牌
前端·vue.js
烛阴3 小时前
告别繁琐的类型注解:TypeScript 类型推断完全指南
前端·javascript·typescript