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

一、前言

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

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

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

二、内容

2.1 动态路由路径传参

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

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

操作如下：

以id为例，让他作为动态参数传入ShowDetail1，通过编程式路由使用param接收（红）

设置name参数，对应rounter.js里面的name，这样可以自动导航到别名对应的路径（绿）

点击按钮后会导航此路径后会渲染ShowDetail1这个Vue页面

最后渲染到名字为 showDetailView1 的 <router-view> 中（蓝）

showDetail1如图所示，可以通过路由的param获取需要的值

5.日志结果如图

2.2 动态路由键值对传参

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

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

操作如下：

设置跳转的路由

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

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

设置跳转的路由

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

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

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

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

渲染页面

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

渲染到指定位置

视图渲染到名字为 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;