页面跳转传值query 和 params 的区别

1: query需要path来引入,params要用name来引入

2. 接受参数时,分别是this.$route.query.name和this.$router.params.name

一、 router-link跳转

router-link 是 Vue Router 提供的用于在 Vue 应用中进行路由导航的组件。它可以生成带有正确路由路径的链接，并处理点击事件以触发路由跳转。

使用 router-link 组件可以实现页面内的导航跳转，而不需要手动编写 <a> 标签或处理点击事件。以下是 router-link 的基本用法：

<router-link to="/path">Link Text</router-link>

二、this.$router.push()

this.$router.push() 是 Vue Router 提供的一个方法，用于在 Vue 组件中进行编程式的路由跳转。

使用 this.$router.push() 可以通过 JavaScript 代码实现路由的跳转，而不需要通过点击链接或导航组件。它接受一个参数，用于指定目标路由的路径或描述目标位置的路由对象。

以下是 this.$router.push() 的基本用法：

// 通过路径跳转
this.$router.push('/path');

// 通过命名路由跳转
this.$router.push({ name: 'routeName' });

// 通过带参数的路径跳转
this.$router.push({ path: '/path', query: { param: 'value' } });

// 通过命名路由和参数跳转
this.$router.push({ name: 'routeName', params: { id: 1 } });

• /path 是目标路由的路径，可以是字符串。
• { name: 'routeName' } 是一个描述目标位置的路由对象，其中 name 属性表示目标路由的名称。
• query 属性用于传递查询参数，params 属性用于传递路径参数。

通过调用 this.$router.push() 方法，Vue Router 会根据参数进行相应的路由跳转。页面将导航到指定的路由，并更新 URL 和视图。

需要注意的是，this.$router.push() 方法只能在 Vue 组件中使用，因为它是通过 Vue Router 实例的 $router 属性访问的。如果想要在非组件的 JavaScript 代码中进行路由跳转，可以通过 import { useRouter } from 'vue-router' 导入路由实例，然后使用 useRouter().push() 方法进行跳转

三、 this.$router.replace()

this.$router.replace() 是 Vue Router 提供的一个方法，用于在 Vue 组件中进行编程式的路由替换。

与 this.$router.push() 方法类似，this.$router.replace() 也用于实现路由的跳转，但它会替换当前的历史记录，而不是添加新的历史记录。这意味着在使用浏览器的返回按钮时，将不会返回到被替换的路由。

以下是 this.$router.replace() 的基本用法：

// 通过路径替换
this.$router.replace('/path');

// 通过命名路由替换
this.$router.replace({ name: 'routeName' });

// 通过带参数的路径替换
this.$router.replace({ path: '/path', query: { param: 'value' } });

// 通过命名路由和参数替换
this.$router.replace({ name: 'routeName', params: { id: 1 } });

与 this.$router.push() 方法类似，this.$router.replace() 方法也接受一个参数，用于指定目标路由的路径或描述目标位置的路由对象。

通过调用 this.$router.replace() 方法，Vue Router 会根据参数进行相应的路由替换。当前页面的历史记录将被替换为新的路由，URL 和视图都会更新为目标路由。

需要注意的是，this.$router.replace() 方法只能在 Vue 组件中使用，因为它是通过 Vue Router 实例的 $router 属性访问的。如果想要在非组件的 JavaScript 代码中进行路由替换，可以通过 import { useRouter } from 'vue-router' 导入路由实例，然后使用 useRouter().replace() 方法进行替换。