vue-router实现路由跳转

最新推荐文章于 2025-07-07 08:24:38 发布

微凉薄荷糖

最新推荐文章于 2025-07-07 08:24:38 发布

阅读量2.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue vue-router

本文链接：https://blog.youkuaiyun.com/shichong123/article/details/81260785

6 篇文章

订阅专栏

1 篇文章

订阅专栏

本文详细介绍了Vue中多种路由跳转方法，包括不带参数、带参数的跳转方式及参数接收方法，并提供了实例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用了一个多月的vue了，发现路由跳转的方式还挺多，现在上干货：

1.返回上个页面(不带参数)

this.$router.go(-1);

2.指定跳转的地址(不带参数)

this.$router.replace('/menu');   // '／'后为页面的地址,

3.跳转指定路由的名字下（不带参数）

this.$router.replace({name,'menuLink'});

4.通过push进行跳转（不带参数）

this.$router.push('/menu');  //通过页面地址跳转 不带参数

this.$router.push({name:'menuLink'});  //通过页面名字跳转 不带参数

5.通过push跳转（用query带参数）这种方式参数会显示在页面上

this.$router.push({
	name: 'menuLink',
	query:{id:'1'}
});

//接收参数的方法为：
this.$route.query.id;

6.通过push跳转（用params带参数）这种方式参数不会显示在页面上

this.$router.push({
	name: 'menuLink',
	params:{id:'2'}
});

//接收参数的方式为
this.$route.params.id;

7.我现在常用的跳转方式为：

this.$router.push({
	path:'/addGoods',
	query:{id:'1'},
})
  
//接收参数为：
this.$route.query.id;

然而，有时候会出现页面找不到的情况，尤其是在pc端，用户可能会在地址栏随便输入地址，这时候，在路由的最后可以加上这么一段：（这一段和以上实际没有多大关系）

{
	path: '*',
	name: '404',
	component: resolve => require(['@/components/page/404'], resolve)
}

当然，具体怎么写可以根据自己配置路由的方法改变。