2023使用Vue开发中遇到的路由传参和路由守卫问题

Vue是一种基于JavaScript的前端开发框架，它可以帮助开发者构建高效、灵活和可扩展的用户界面。在Vue开发过程中，路由传参和路由守卫是一些常见的问题。本文将介绍这些问题，并提供具体的代码示例。

一、路由传参问题
在Vue中，路由传参是指在页面跳转的同时传递一些数据给目标页面。常见的场景包括用户在列表页点击某个项目后跳转到详情页，并将对应项目的信息传递给详情页。在实现路由传参时，可以使用Vue Router的params或query来传递参数。

1. 使用params传参
   params是一种将参数以动态路径的形式传递给目标页面的方式，它适用于需要在URL中包含参数的情况。下面是一个示例代码：

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/detail/:id',
      component: Detail
    }
  ]
})

// 列表页
<template>
  <div>
    <ul>
      <li v-for="item in itemList" :key="item.id">
        <router-link :to="'/detail/' + item.id">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' },
      ]
    }
  }
}
</script>

// 详情页
<template>
  <div>
    <h2>{{ project.name }}</h2>
    <p>{{ project.description }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      project: {}
    }
  },
  mounted() {
    // 获取params参数
    const id = this.$route.params.id;
    // 根据id去获取具体项目信息，这里为了简化，直接从itemList中查找
    this.project = this.itemList.find(item => item.id === Number(id));
  }
}
</script>

2. 使用query传参
   query是一种将参数以键值对的形式附加在URL后的方式，它适用于参数较多或较复杂的情况。下面是一个示例代码：

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/detail',
      component: Detail
    }
  ]
})

// 列表页
<template>
  <div>
    <ul>
      <li v-for="item in itemList" :key="item.id">
        <router-link :to="{ path: '/detail', query: { id: item.id }}">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' },
      ]
    }
  }
}
</script>

// 详情页
<template>
  <div>
    <h2>{{ project.name }}</h2>
    <p>{{ project.description }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      project: {}
    }
  },
  mounted() {
    // 获取query参数
    const id = this.$route.query.id;
    // 根据id去获取具体项目信息，这里为了简化，直接从itemList中查找
    this.project = this.itemList.find(item => item.id === Number(id));
  }
}
</script>

二、路由守卫问题
路由守卫是指在进行路由跳转前和跳转后执行一些操作的功能。在Vue Router中，可以通过全局前置守卫、全局后置守卫以及组件内的守卫来实现不同的需求。

1. 全局前置守卫
   全局前置守卫可以在任意一个路由跳转前执行一些操作，例如验证用户权限或记录用户行为。下面是一个示例代码：

// 路由守卫配置
router.beforeEach((to, from, next) => {
  // 判断用户是否处于登录状态
  const isLogged = checkLogin();
  
  if (to.meta.authRequired && !isLogged) {
    // 需要登录才能访问的页面
    next('/login');
  } else {
    next();
  }
});

2. 全局后置守卫
   全局后置守卫可以在任意一个路由跳转后执行一些操作，例如记录用户行为或统计页面浏览量。下面是一个示例代码：

// 路由守卫配置
router.afterEach((to, from) => {
  // 统计页面浏览量
  recordPageView();
});

3. 组件内的守卫
   组件内的守卫可以对当前组件进行特定的操作，例如在组件销毁前保存用户输入的数据或检查表单是否填写完整。下面是一个示例代码：

// 组件内的守卫配置
export default {
  beforeRouteLeave(to, from, next) {
    if (this.isDirty) {
      // 提示用户保存未保存的数据
      const confirmed = window.confirm('是否保存未提交的数据？');

      if (confirmed) {
        // 保存数据
        this.saveData();
      }
    }

    next();
  }
}