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);
            }
        }
     
     
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    HTML
    JavaScript事件总结
    关于更新发布CSS和JS文件的缓存问题
    Google Ajax库与 Jquery常用版本选择
    X队网面试经历小记
    妹纸我失业了……
    今天在公司填的《新员工试用期的问卷调查》
    转载来的迅雷面试题(网页布局)
    今天写了个动态切换样式文件,感觉比我之前做的那个好多了哦。
    有用的网址
  • 原文地址:https://www.cnblogs.com/SRH151219/p/10426999.html
Copyright © 2011-2022 走看看