vue 路由参数

// 定义路由配置
const routes = [
  {
    path: '/user/:id', // 动态路由参数 :id
    component: User
  },
  {
    path: '/search/:keyword?',
    component: Search // 可选参数 :keyword
  }
]

// 在组件中获取路由参数
<template>
  <div>
    <p>User ID: {{ $route.params.id }}</p> <!-- 获取动态路由参数 -->
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route.params.id); // 打印路由参数
  }
}
</script>

// 使用编程式导航传递参数
this.$router.push({ name: 'user', params: { id: 123 }});

// 带查询参数的路由
this.$router.push({ path: '/search', query: { keyword: 'vue' }});

解释说明：

1. 定义路由配置：在 routes 数组中，使用 :id 和 :keyword? 来定义动态和可选的路由参数。
2. 获取路由参数：在组件中通过 $route.params 来获取路由参数，并可以在模板或生命周期钩子中使用。
3. 编程式导航：使用 this.$router.push 方法进行编程式导航时，可以通过 params 或 query 来传递参数。