本文摘自PHP中文网，作者青灯夜游，侵删。
本教程操作环境：windows7系统、vue2.9版，该方法适用于所有品牌电脑。
vue跳转页面的方法
1：router-link跳转
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- 直接跳转 -->
<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()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <template>
<p id='test'>
<button @click='goTo()'>点击跳转4</button>
</p>
</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一个参数的时候，地址栏中的地址如下图：
第一种方式：path - query 传参
第二种方式：name - params传参数
阅读剩余部分
相关阅读 >>
vue中如何分离css
html怎么点击图片跳转页面
vue和react能做什么
在vue中怎么定义自定义组件
.vue文件可以写注释吗
深入了解vue中的计算属性
vue文件怎么打开
vue中的nexttick原理
vue中如何正确强制组件重新渲染？（方法介绍）
怎么用vue.js做异步请求
更多相关阅读请进入《vue》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » vue.js怎么进行页面跳转？
