【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接收参数

2. 设置跳转的路由

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

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

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

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

3. 渲染页面

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

4. 渲染到指定位置

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