route和router的区别，怎么定义vue-router的动态路由？怎么获取传过来的值

目录

route和router的区别

1. Route（路由）：

2. Router（路由器）：

总结：

定义Vue Router的动态路由

1.在路由配置文件（通常是router/index.js）中导入Vue和Vue Router：

2.创建一个新的Router实例并定义路由：

3.在组件中访问传递的参数：

---

route和router的区别

route（路由）和router（路由器）是在计算机网络和网络编程中常用的两个术语，它们有一些相似之处，但也存在一些区别。

1. Route（路由）：

• 路由（route）指的是确定数据包从源地址到目标地址的路径或者规则。
• 在计算机网络中，路由是将数据包从发送方传输到接收方的过程，它决定了数据包应该沿着哪条路径传递。
• 路由通常基于网络拓扑、IP地址和其他网络规则进行决策。
• 路由可以用于不同的网络协议，如IP路由、ARP路由等。

2. Router（路由器）：

• 路由器（router）是一种网络设备，用于连接不同的网络，并根据预定义的路由表将数据包从一个网络转发到另一个网络。
• 路由器是实现路由功能的硬件或软件设备，它能够在不同的网络之间转发数据包，起到连接网络的作用。
• 路由器通常使用一系列的接口和协议来实现不同网络之间的数据传输和路由选择。
• 路由器还可以执行其他网络管理功能，如防火墙、负载均衡等。

总结：

简单来说，route是一个名词，表示确定数据包传输路径的规则或过程；而router是一个设备，用于连接不同的网络并实现路由功能。路由器通过执行路由规则来决定数据包的转发路径，从而完成数据在不同网络之间的传输。

 

定义Vue Router的动态路由

在Vue Router中，可以通过动态路由来匹配不同的URL，并根据URL中的参数来动态渲染组件。以下是定义Vue Router的动态路由的步骤：

1.在路由配置文件（通常是router/index.js）中导入Vue和Vue Router：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

2.创建一个新的Router实例并定义路由：

export default new Router({
  routes: [
    {
      path: '/user/:id', // 定义动态路由参数:id
      name: 'User',
      component: () => import('@/views/User.vue') // 组件路径
    },
    // 其他路由...
  ]
});

在上述代码中，:id表示动态参数，可以匹配不同的值。

3.在组件中访问传递的参数：

在被匹配的组件中，可以通过$route.params来获取传递的参数。例如，在User.vue组件中可以这样访问传递的id参数：

export default {
  created() {
    const userId = this.$route.params.id; // 获取传递的参数值
    // 使用参数进行相关操作
  }
}

通过this.$route.params.id就能够获取到传递的动态参数值。

需要注意的是，当动态路由参数发生变化时，组件不会重新创建。如果需要监听参数变化，可以使用watch来监测$route.params的变化。

以上是定义Vue Router的动态路由和获取传递的值的方法。通过使用动态路由，可以根据不同的URL参数动态加载不同的组件，并在组件中获取传递的值进行相关操作。