vue 路由跳转及传参的多种方式及注意事项

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

qq_夏阳

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

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_41806475/article/details/88569169

vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了Vue中四种不同的页面跳转方式，包括通过<router-link>标签和事件触发的跳转，以及如何通过name和path传参。同时，文章对比了不同方式下参数在页面刷新后的表现，推荐使用path方式跳转。

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

vue的跳转方式如下：

第一种：

<router-link tag="a" :to="{name:'测试页',params:{id:1}}">点击跳转(name)</router-link>

第二种：

<router-link tag="a" :to="{path:'./test',query:{id:1}}">点击跳转(path)</router-link>

第三种：

html代码:
<div @click="clickTo">点击跳转</div>

js：
this.$router.push({ name: '测试页', params: { id: 1 }})

第四种：

html代码:
<div @click="clickTo">点击跳转</div>

js：
this.$router.push({ path: './test', query: { id: 1 }})

总结：

第1，2种，是通过<router-link>标签跳转，第3，4种是通过事件跳转页面。

第1，3种，是通过name命名路由的方式跳转传参，跳转后页面刷新，参数会丢失（需要传参跳转的时候，不建议使用）；

第2，4种，是通过path路由跳转，跳转后页面刷新，参数不会丢失，跟我们平时写的路径后面携带参数类似：/test?id=1 (推荐使用);

补充接收参数：

<script>
	export default{
		data(){
			return{
				getData:null,
			}
		},
		created(){
            this.getData = this.$route.params.id;   //第1，3种方式
			this.getData = this.$route.query.id;    //第2，4种方式
		},
	}
</script>