vue.js怎么进行页面跳转?


本文摘自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一个参数的时候,地址栏中的地址如下图:

1.png

第一种方式:path - query 传参

2.png

第二种方式:name - params传参数

阅读剩余部分

相关阅读 >>

vue开发必须要搭脚手架么?

vue和react监听数据的区别是什么?

vue常见面试题汇总(附答案解析)

一文带你看看vue router4中的酷炫功能

一个实例入门vue计算属性、方法、侦听器

vue中怎么使用layui

10个关于路由vue-router的vuejs面试题(含答案解析)

vue中的样式绑定详解

vue常用的组件通信方式

vue前端ui框架有哪些?

更多相关阅读请进入《vue》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...