Vue 路由跳转及路由传参

在 Vue.js 应用中，路由跳转和路由传参是两个非常重要的概念。它们可以帮助我们在不同的页面之间传递信息，实现单页面应用的各种功能。本文将详细介绍 Vue 路由跳转及路由传参的方法和技巧。

1. 路由跳转

在 Vue Router 中，有多种方法可以实现路由跳转。以下是一些常用的方法：

1.1 使用 <router-link> 组件

<router-link> 是 Vue Router 提供的一个内置组件，用于创建导航链接。你可以通过设置 to 属性来指定目标路由。

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

1.2 使用编程式导航

除了使用 <router-link> 组件外，你还可以通过编程式导航来实现路由跳转。在 Vue 组件中，你可以通过 this.$router.push()、this.$router.replace() 和 this.$router.go() 方法来实现跳转。

// 使用 push 方法跳转到指定路由
this.$router.push('/about');

// 使用 replace 方法替换当前路由
this.$router.replace('/about');

// 使用 go 方法前进或后退
this.$router.go(-1); // 后退一步
this.$router.go(1); // 前进一步

2. 路由传参

在 Vue Router 中，有两种主要的路由传参方式：params 和 query。它们都可以实现跨页面传递数据，但使用方式和场景有所不同。

2.1 params 传参

params 传参是通过 URL 的路径参数来传递数据的。它适用于具有动态路径的路由。

// 定义带有动态路径的路由
const routes = [
  {
    path: '/user/:id',
    component: User
  }
];

在组件内部，你可以通过 $route.params 对象访问这些参数：

export default {
  mounted() {
    console.log(this.$route.params.id);
  }
};

要实现 params 传参，你可以在路由跳转时设置 name 属性，并传递 params 对象：

// 使用编程式导航进行 params 传参
this.$router.push({ name: 'User', params: { id: 1 } });

2.2 query 传参

query 传参是通过 URL 的查询参数（query string）来传递数据的。它适用于不需要改变 URL 路径的传参场景。

// 使用编程式导航进行 query 传参
this.$router.push({ path: '/about', query: { topic: 'Vue' } });

在组件内部，你可以通过 $route.query 对象访问这些参数：

export default {
  mounted() {
    console.log(this.$route.query.topic);
  }
};

3. 注意事项

在使用路由跳转和路由传参时，需要注意以下几点：

• 使用 params 传参时，目标路由必须包含动态路径参数。
• 使用 query 传参时，不需要改变 URL 路径，只需在跳转时设置 query 对象即可。
• 在组件内部访问路由参数时，需要注意 $route 和 $router 的区别。$route 是当前路由对象，包含路由参数等信息；$router 是路由实例，提供导航方法。