zoukankan      html  css  js  c++  java
  • vue----webpack模板----编程式导航

    编程式导航
     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);
            }
        }
     
     
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    2021年1月4号
    2021年1月3号
    2021年1月2日
    2021年1月1日
    Jenkins定时构建与轮询SCM
    2017-08-22校验
    2017-08-21xlVBASplitSheetsSameTime
    20170821xlVBA跨表公式套用
    20170821xlVBA隐藏空行
    20170814xlVBA限定日期按客户分类汇总
  • 原文地址:https://www.cnblogs.com/SRH151219/p/10426999.html
Copyright © 2011-2022 走看看