vue页面跳转的三种方式

 

1、a标签跳转

个人理解:这个就属于跳到外部链接,项目里平时很少用

<a href="http://www.baidu.com/"><input type="button" value='百度'></a>

2、router-link跳转

项目的内部路由跳转

<router-link to="/water-sewage-treatment" class="router-test">
                    查看全部水厂
</router-link>

3、点击事件跳转

第一种情况是跳转到指定路由

 html :
      <button @click="hreftwo" class="test-one">点我到第二个页面</button>
 js :
   methods:{ //跳转页面
                    hreftwo(){
                              this.$router.push({ path:'/two.html'  })
                              }
           }

第二种情况是跳转到上一页(如果没有上一页返回首页)

html:
      <div @click="goback()">返回</div>
     // 只返回上一页
           goback(){
                this.$router.go(-1);
            },
     //如果没有上一页返回首页
    methods: {
        back(){
            if (window.history.length <= 1) {
                this.$router.push({path:'/'})
                return false
            } else {
                this.$router.go(-1)
            }
        }
    },

3、题外:最近做的app项目用的vant组件库,里面有个van-cell单元格组件,需求是要在里面一个跳转事件,如图,

在这里插入图片描述
代码实例:
在这里插入图片描述
原理是和router-link一样,to到想要跳转的路由
还有一种情况,在作项目时候遇到的频率很多,就是表格中某个属性加上跳转路由事件,这时候我们在所在的元素下使用插槽实现,如图:
#name是我要处理的元素,里面用router-link实现
在这里插入图片描述

 

1.本站默认解压密码为:xiaoqingtai.com
2.本站所有内容均由互联网收集整理,仅供大家参考、学习,禁止商用。
3.本站所有内容版权归原著所有,如有侵权请及时联系我们做删除处理。
请扫描下方二维码关注微信公众号或直接微信搜索“小青苔基地”关注
小青苔基地 » vue页面跳转的三种方式

发表评论