Vue-5 路由参数的传递和获取（query 和 params)，导航守卫和路由元信息，History模式

Vue-5 路由传参的几种方式（query和params），获取路由参数，导航守卫和路由元信息，History模式

除了 props 和 $emit 之外，路由时也可以携带数据，即通过路由传参。

一、路由参数的传递和接收

1. 动态路由的匹配

示例需求：有个商品详情的组件，点击任何商品都会渲染这个组件，点击商品时向详情组件传递商品的 id，详情组件在被渲染时接收这个 id，请求对应的数据，渲染在详情组件上。

可以在配置路由时直接为参数预留路径：

// router>index.js 的routes
routes: [
    {
   
        // 在路径中预留参数的位置
        path: '/good-detail/:id',
        component: Detail
    }
]

调用：

<!-- 调用路由时向路由传参 -->
<router-link to="/good-detail/1">商品1</router-link>
<router-link to="/good-detail/2">商品2</router-link>
<router-link to="/good-detail/3">商品3</router-link>

<!-- 渲染详情组件 -->
<router-view />

接收参数：

<!-- 详情组件的结构中接收 -->
<div class="detail">
    <!-- 用 $route 获取路由信息，从路由信息的 params 中接收参数  -->
    {
  { this.$route.params.id }}
</div>

// 如果想要在组件刚开始加载时获取 id，并且根据 id 做一些数据操作，那就在对应的钩子函数中，获取路由参数
created() {
    // detail 组件生命周期的 created 钩子函数
    const id = this.$route.params.id;
    // code
}

用 created 和 mounted 函数，只能在第一个商品被渲染时响应，detail 组件在第一次被渲染之后，虽然路由变了，但是 created 和 mounted 不会重新执行。这种情况下，可以用 updated 来动态获取路由参数。也可以用 watch 来监听路由的变化。

watch: {
   
    // to 和 from 分别表示路由切换前后的路由元信息
    '$route'(to, from) {
   
      //