1：router-link跳转
<!-- 直接跳转 --> <router-link to='/testDemo'> <button>点击跳转2</button> </router-link> <!-- 带参数跳转 --> <router-link :to="{path:'testDemo',query:{setid:123456}}"> <button>点击跳转1</button> </router-link> <router-link :to="{name:'testDemo',params:{setid:1111222}}"> <button>点击跳转3</button> </router-link>
2：this.$router.push()
<template> <div id='test'> <button @click='goTo()'>点击跳转4</button> </div> </template> <script> export default{ name:'test', methods:{ goTo(){ //直接跳转 this.$router.push('/testDemo'); //带参数跳转 this.$router.push({path:'/testDemo',query:{setid:123456}}); this.$router.push({name:'testDemo',params:{setid:111222}}); } } } </script>
params和query传参数有什么不一样？？在地址栏中可以看到，params传参数时，地址栏中看不到参数的内容，有点像ajax中的post传参，query传参数时，地址栏中可以看到传过来的参数信息，有点像ajax的个体传参
如果单独传setId一个参数的时候，地址栏中的地址如下图：
推荐第二种方式
<button @click="goHome">[跳转到主页]</button> export default { name: "App", methods: { // 跳转页面方法 goHome() { this.$router.push("/"); }, }
新创建一个公众号 Rockey小何同学 想相互交流的同学可以关注一下哈！ 感谢支持！
