vue 路由使用详解：路由传参与导航守卫Vue Router 是 Vue.js 提供的官方路由管理工具，用于实现组件之间

Vue Router 是 Vue.js 提供的官方路由管理工具，用于实现组件之间的跳转和数据传递。它不仅能够根据地址切换组件，还提供了丰富的导航守卫和路由参数功能。本文将详细介绍 Vue 路由的使用方法、路由传参的多种方式以及导航守卫的用法。

一、Vue 路由基础使用

1.1 安装路由

在 Vue 3 中，我们需要安装 Vue Router 的下一个版本：

npm install vue-router@next

1.2 定义路由

在 src/router/index.js 文件中定义路由规则：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  { path: '/', component: Home },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

1.3 创建 Vue 实例并使用路由

在 main.js 文件中引入路由并挂载到 Vue 应用中：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router); // 使用路由
app.mount('#app');

1.4 使用路由占位符

在 App.vue 中使用 <router-view> 组件作为路由视图的占位符：

<!-- src/App.vue -->
<template>
  <div id="app">
    <router-view></router-view> <!-- 路由视图渲染的位置 -->
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

二、Vue 路由传参方式

Vue Router 提供了多种传参方式，包括路径参数（params）、查询参数（query）以及通过 props 传递参数。下面将详细介绍它们的用法及区别。

2.1 动态路由匹配（路径参数）

通过在路由路径中使用占位符 :param 来表示动态参数，然后在组件中通过 this.$route.params 访问这些参数。

用法：

// src/router/index.js
const routes = [
  { path: '/user/:id', component: User },
];

在组件中获取参数：

export default {
  mounted() {
    console.log(this.$route.params.id); // 输出：动态参数 id
  }
};

特点：

刷新页面时，路径参数不会丢失。
适合用于层级结构的动态路由，例如用户详情页、商品详情页等。

2.2 查询参数（Query）

类似于网络请求中的 get 请求，传送的参数通过问号加键值对形式添加在URL地址末尾，用 route.query接收参数页面刷新传送的参数不会丢失，query 较为灵活既可以配合 path 使用，也能配合 name 使用；

用法：

// 传递查询参数
this.$router.push({name:'home', query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// 组件中取参: this.$route.query.id});

特点：

刷新页面时，查询参数不会丢失。
适合用于筛选、搜索等附加信息的传递。

2.3 通过 `params` 传递参数

类似于网络请求中的 post 请求，params 传过去的参数不会显示在地址栏中，刷新页面参数会丢失，params 只能配合 name 使用，如果使用 path，params 会失效，使用 route.params 接收参数；

用法：

his.$router.push({name:'home',params: {id:'1'}}) 
// 只能用 name 
// 不配置path, 第一次可请求, 刷新页面id会消失 
// 组件中取参, this.$route.params.id

2.4 `meta` 属性传递参数

可以在路由配置中通过 meta 属性传递一些静态的配置信息，如权限控制、标题设置等。

用法：

javascript
复制代码
const routes = [
  { 
    path: '/user/:id', 
    component: User, 
    meta: { requiresAuth: true } 
  },
];

在导航守卫中使用 meta 信息进行判断：

javascript
复制代码
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login'); // 跳转到登录页
  } else {
    next(); // 继续导航
  }
});

三、路由导航守卫

Vue Router 提供了多种导航守卫，用于在路由跳转前后执行一些逻辑，例如权限控制、数据预加载等。

3.1 全局导航守卫

全局前置守卫：在路由跳转前执行。

javascript
复制代码
router.beforeEach((to, from, next) => {
  console.log('全局前置守卫');
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login'); // 跳转到登录页
  } else {
    next(); // 继续导航
  }
});

全局后置守卫：在路由跳转后执行。

javascript
复制代码
router.afterEach((to, from) => {
  console.log('全局后置守卫');
});

3.2 路由独享守卫

为单个路由定义的守卫，仅在进入该路由时执行。

javascript
复制代码
const routes = [
  {
    path: '/user/:id',
    component: User,
    beforeEnter: (to, from, next) => {
      console.log('路由独享守卫');
      next(); // 继续导航
    },
  },
];

3.3 组件内守卫

可以在组件中直接定义守卫，用于对组件的某些行为进行控制。

组件前置守卫：在进入组件前执行。

javascript
复制代码
export default {
  name: 'User',
  beforeRouteEnter(to, from, next) {
    console.log('组件内前置守卫');
    next(vm => {
      vm.someMethod(); // 可以访问组件实例 `vm`
    });
  },
};

组件更新守卫：在组件的路由参数更新时执行。

javascript
复制代码
export default {
  beforeRouteUpdate(to, from, next) {
    console.log('组件内更新守卫');
    next(); // 继续导航
  },
};

组件离开守卫：在导航离开组件时执行。

javascript
复制代码
export default {
  beforeRouteLeave(to, from, next) {
    console.log('组件内离开守卫');
    next(); // 继续导航
  },
};

结语

Vue 路由为单页应用提供了强大的导航功能。通过理解并熟练掌握各种传参方式和导航守卫，可以更高效地管理组件间的数据传递和权限控制。在实际开发中，根据具体需求选择合适的传参方式，并在合适的时机使用导航守卫，能够让你的应用更加健壮和可维护。希望本文对你理解 Vue 路由的使用有所帮助。

vue 路由使用详解：路由传参与导航守卫