个人技术总结——Vue.js路由之动态路由匹配

[222000221宋佳荣]

这个作业属于哪个课程	2023年福大-软件工程实践-W班
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	个人技术总结
其他参考文献	VUE-Router官网

目录

• 一、技术概述
• 1.1使用的情况
• 2.2学习的原因
• 2.3技术的难点
• 二、技术详述
• 三、技术使用中遇到的问题和解决过程
• 四、总结

一、技术概述

1.1使用的情况

在Vue.js中，可以通过动态路由匹配的方式来实现可配置的、可传参数的路由，提升路由的灵活性和可配置性。

2.2学习的原因

为了更好地实现组件间的通信和数据传递。

2.3技术的难点

动态路由匹配的关键在于路由参数的传递和处理，需要掌握路由参数的传递方式以及路由参数如何获取和处理。

二、技术详述

步骤1. 首先需要在Vue.js项目中引入路由模块。可以使用npm包管理工具安装vue-router模块，然后在main.js中引入并注册路由模块：

//main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 引入路由模块

Vue.config.productionTip = false

new Vue({
  router,  // 注册路由模块
  render: h => h(App),
}).$mount('#app')

步骤2. 在router目录下创建路由文件（如router.js），在该文件中定义路由表并导出router对象。可以通过动态路由的方式，将参数添加到路由的path中，以 '/' 作为占位符，也可以使用（:）表示占位符。

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',  // 定义动态路由匹配的路径，:id是占位符
      component: () => import("@/views/User.vue")  // 定义组件
    }
  ]
})

export default router

步骤3. 通过路由跳转组件（如router-link）来实现动态路由的跳转，并把占位符内容传递到组件中。

<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/user/1">跳转到用户1</router-link><!-- 跳转到带有1的动态路由 /user/1 -->
    <router-link to="/user/2">跳转到用户2</router-link><!-- 跳转到带有2的动态路由 /user/2 -->
    <router-view></router-view>
  </div>
</template>

步骤4. 在组件中使用 $route.params 来获取动态路由中的参数，并在页面中展现出来。

<!-- User.vue -->
<template>
  <div>
    <h1>用户信息</h1>
    <p>用户ID: {{ $route.params.id }}</p><!-- 获取id参数并展现 -->
  </div>
</template>

完成四个步骤，即可可实现Vue.js动态路由匹配了。

三、技术使用中遇到的问题和解决过程

问题： 在使用动态路由匹配的时候，如果想要不使用动态路由匹配项的值而是使用默认的值，可能会出现无法获取到默认值的问题。

解决办法： 我们可以在动态路由匹配项中指定默认值。在组件中，我们可以通过this.$route.params.ProductId(paramName, defaultValue)来获取参数，其中defaultValue是默认值。当路由没有该参数的时候，就会返回默认值。

四、总结

动态路由匹配是Vue.js中非常重要的一个组成部分，掌握动态路由匹配可以让我们更好的设计和实现Web应用程序，是增强前端路由能力以及开发高质量Web应用的必要技能之一。