VUE router页面跳转传值

最新推荐文章于 2024-07-03 21:45:00 发布

hongChengliu

最新推荐文章于 2024-07-03 21:45:00 发布

阅读量401

点赞数

分类专栏： vue 路由 router

本文链接：https://blog.youkuaiyun.com/weixin_44853999/article/details/102711679

版权

vue 同时被 3 个专栏收录

11 篇文章

订阅专栏

路由

1 篇文章

订阅专栏

router

1 篇文章

订阅专栏

本文介绍了Vue中进行页面跳转的四种方法，包括简单页面跳转、带参数传递、通过URL改变传值及JavaScript方式跳转。在示例中详细阐述了如何在router.vue中设置路由，并在目标页面如demo1.vue中接收传递的值。

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

在vue中有三种方法，
首先创建router.vue文件。
在router文件中实现页面跳转

第一种方式也是最简单的单纯跳转页面

  <router-link to="/demo1"> 点击我跳转到demo1页面  </router-link>

第二种方式对跳转的页面传值
router.vue 传值页面

<router-link :to="{name:demo1,params:{ userId:123 }  }"> 点我</router-link>
<!--这里的name就是等下在路由里设置的name-->

demo1.vue 接受页面

<script>
export default{
data(){
return{
}
},
mounted(){
	// 接收并  弹出在router设置的值
	alert(this.$route.params.userId)
}

}

</script>

接下来就要设置demo1de 路由

{
path:' /demo1/:userId  ',
name:'demo1'
component:'demo1'
}

这样就由router页面跳转到demo1页面，跳转到demo1页面之后接收由router页面传过来的userId的值

第三种方法
跳转页面并且改变URL
原URL http://localhost:8080/#/testdemo2
跳转后 http://localhost:8080/#/testdemo2?username=username
多出了： ?username=username

router.vue页面

<router-link :to="{name:demo1, query:{username:username } }"

第四种 js方式跳转

router.vue页面

<button  @click="url">点击我跳转</button>

<script>
    export default{
data(){
return{}
}

,methods:{
url(){
this.router.push({path: '/demo1'})
}
}
}
</script>