首页 > Web开发 > 详细

vue----webpack模板----编程式导航

时间:2019-02-24 18:36:56      阅读:193      评论:0      收藏:0      [点我收藏+]
编程式导航
 1.this.$router.push()路由跳转
2.this.$router.back()路由返回,没有参数
3.this.$router.forward()路由前进
4.this.$router.replace(“路径”)路由替换
5.this.$router.go() 前进1 /后退-1 /刷新0
技术分享图片技术分享图片和浏览器中的返回, 前进,刷新道理相同
 
1.this.$router.push()路由跳转
 
<div class="goods">
        <ul>
            <li v-for="(item,index) in goodslist" @click="handleChangeRouter(item,index)">
                <p>{{item.goodsName}}</p>
                <p>{{item.goodsPrice}}</p>
            </li>
        </ul>
    </div>
 
 
methods:{
        handleChangeRouter(item,index){
    //传值的方法 有三种,注意,路径只能用name属性
            this.$router.push({name:"details",query:{name:item.goodsName,price:item.goodsPrice}})
        }
    },

 

2.this.$router.back()路由返回,没有参数
应用举例:
手机页面上的 < 符号,当点击时,返回

 

 
3.this.$router.forward()路由前进
必须先到达某个路由,然后返回,此时才能前进
 
4.this.$router.replace(“路径”)路由替换
参数为路径,点击后,将当前所有的路径都进行了替换,前进和后退都失效

 

5.this.$router.go()前进1     /后退-1    /刷新0
 
传递参数,前进:1
        后退:-1
        刷新:0
 
代码如下:
 <div class="back" @click="handleBack()">返回</div>
 <div class="replace" @click="handleReplace()">替换</div>
 <div class="forward" @click="handleForward()">前进</div>
<div class="go" @click="handleGo()">go</div>
 
 
methods:{
        handleBack(){
            this.$router.back()
        },
        handleForward(){
            this.$router.forward()
        },
         handleReplace(){
            this.$router.replace("/goods")
        },
         handleGo(){
            this.$router.go(0);
        }
    }
 

 

 
 
 
 
 
 
 
 
 
 
 
 

vue----webpack模板----编程式导航

原文:https://www.cnblogs.com/SRH151219/p/10426999.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!