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()
方法进行替换。